Pleine largeur vimeo wrapper arrière-plan
Je suis en train de créer une pleine largeur iframe vimeo fond couvert par un schéma situé dans mon corps div. La vidéo est couvert par une superposition de sorte qu'il devient unclickable. J'ai essayé de donner la vidéo à 100% de la largeur et de la hauteur mais pas de chance sur la couverture de l'écran.. je suis en train d'avoir les vidéos de la pop jusqu'à 500x250 px.
Html
<div class="video">
<iframe src="//player.vimeo.com/video/82123812?title=0&byline=0&portrait=0&color=3a6774&autoplay=1&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;
}
OriginalL'auteur notcho nachos | 2014-01-23
Vous devez vous connecter pour publier un commentaire.
Vous devez définir la largeur et la hauteur de l'iframe ainsi que son emballage. J'ai aussi ajouté un peu de z-index pour la chance!
Hey diddle diddle, voici un violon: http://jsfiddle.net/n28Ef/1/
OriginalL'auteur Josh Harrison
Cette solution réplique de la propriété css
background-size: cover
, à l'aide d'une iframe au lieu d'une image, en full CSS.Tout d'abord, mettez votre vimeo iframe dans une enveloppe:
Ensuite appliquer ces styles:
En outre, dans le cas de Vimeo, un pro compte vous donne la possibilité de supprimer les commandes de son lecteur.
Cette solution a le mieux fonctionné pour moi. Afin de le faire rentrer dans un récipient, j'ai utilisé
position: absolute
sur.iframe-wrapper
etmin-height: 100%
sur leiframe
. Si vous utilisezmin-height: 100vh
et la fenêtre est plus court que le contenant, ne pas remplir la hauteur de son conteneur, si ce type de mise en page des questions pour vous.Merci! Je cherchais quelque chose comme cela pendant des heures aujourd'hui!
Ce doit être marqué comme la solution retenue, fonctionne avec redimensionnement, tant que le ratio d'aspect de 16:9.
OriginalL'auteur Christophe Marois