web-dev-qa-db-fra.com

Fond de wrapper Vimeo complet

J'essaie de créer un fond de Vimeo iframe de pleine largeur couvert par un motif situé dans mon corps div. La vidéo est couverte par une superposition de sorte qu'il devient décolletable. Ive essayé de donner la vidéo à 100% de la largeur et de la hauteur de la vidéo, sans chance sur la couverture de l'écran .. J'essaie de faire apparaître les vidéos à 500x250 px.

Html

 <div class="video">    
    <iframe src="//player.vimeo.com/video/82123812?title=0&amp;byline=0&amp;portrait=0&amp;color=3a6774&amp;autoplay=1&amp;loop=1" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>  
    <div class="overlay"></div> 
</div>

CSS

.video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.video .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../img/overlay-pattern.png) repeat;
}
htmlcssiframevideofluid-layout
10
notcho nachos

Cette solution reproduit la propriété CSS background-size: cover, en utilisant un iframe au lieu d'une image, en totalité CSS.

Tout d'abord, mettez votre iframe Vimeo dans une enveloppe:

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

Appliquez ensuite ces 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%);
}

De plus, dans le cas du compte Vimeo, A PRO vous permet de supprimer les commandes du joueur.

20
Christophe Marois