web-dev-qa-db-fra.com

Forcer la vidéo YouTube iframe au centre et couvrir entièrement l'écran en arrière-plan à l'aide de HTML5 CSS3

Comment forcer la vidéo HTML5 iframe YouTube à s'adapter au centre, couvrir l'arrière-plan de la fenêtre plein écran en utilisant CSS3 HTML, éventuellement Java?

Comme par exemple "Paypal.it" fond de la page d'accueil ou "nity3d.com/5 "vidéo en haut, a comme iframe vidéo YouTube. Le iframe couvre le plein écran (zoom) et couvre toute la largeur et la hauteur lors du redimensionnement de la fenêtre. Il redimensionne en maintenant la largeur de 100% min en zoomant la hauteur ou la hauteur de 100% min en zoomant la largeur.

Comment cet effet est-il obtenu en utilisant iframe HTML5 et CSS3?

Exemple de code HTML5

<div class="video" style="opacity: 1;">

    <iframe src="http://www.youtube.com/embed/AddHereVideoId?autoplay=1&amp;html5=1" frameborder="0" style="height: 720px;">
     </iframe>

</div>

Code CSS3 HTML éventuellement Java serait appréciée.

htmlcssvideobackgroundyoutube-iframe-api
12
Alan Mattano

Pour une vraie solution plein écran, cela peut être réalisé comme ceci:

HTML

<div class="video-background">
    <div class="video-foreground">
      <iframe src="https://www.youtube.com/embed/I4agXcHLySs?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>

CSS

* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}

Ce n'est pas parfait, par exemple il ne fonctionne pas bien avec des proportions extrêmes du conteneur, mais fait un excellent travail dans la plupart des situations. Voici un exemple de travail: https://codepen.io/anon/pen/zRVLGJ

8
Hinrich

Je pense que c'est ce que vous essayez de réaliser:

.video-wrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */  padding-top: 25px;}
.video-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

<div class="video-wrapper">
  <iframe src="http://www.youtube.com/embed/AddHereVideoId?autoplay=1&amp;html5=1" frameborder="0" allowfullscreen></iframe>
</div>

Cela vous donnera une vidéo qui remplit le conteneur dans lequel il se trouve et augmentera automatiquement la hauteur également.

J'ai trouvé cette solution à l'origine ici: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

3
Sam Willis