Full-width vimeo wrapper background

后端 未结 2 698
独厮守ぢ
独厮守ぢ 2021-02-02 01:51

I am trying to create a full-width iframe vimeo background covered by a pattern located in my body div. The video is covered by an overlay so it becomes unclickable. Ive tried g

相关标签:
2条回答
  • 2021-02-02 02:08

    You need to set the width and height of the iframe as well as its wrapper. I've also added some z-indexes for luck!

    Hey diddle diddle, here is a fiddle: http://jsfiddle.net/n28Ef/1/

    .video {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    
    .video iframe {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
    }
    
    .video .overlay {
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%; 
        background: url(../img/overlay-pattern.png) repeat;
    }
    
    0 讨论(0)
  • 2021-02-02 02:22

    This solution replicates the css property background-size: cover, using an iframe instead of an image, in full CSS.

    First, put your vimeo iframe in a wrapper:

    <div class="iframe-wrapper">
      <iframe src="https://player.vimeo.com/video/123456789?autoplay=1&loop=1&byline=0&title=0">
    </div>
    

    Then apply those styles:

    /* Makes a fixed background wrapper
    which the user cannot interact with */
    
    .iframe-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      pointer-events: none;
      overflow: hidden;
    }
    
    /* Make the iframe keep an aspect ratio, and
    position it in the middle of its parent wrapper*/
    
    .iframe-wrapper iframe {
      width: 100vw;
      height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
      min-height: 100vh;
      min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    

    In addition, in the case of Vimeo, a pro account gives you the ability to remove the player's controls.

    0 讨论(0)
提交回复
热议问题