Kraft iframe YouTube-video zum center passen und vollständige Abdeckung der Leinwand im hintergrund mit HTML5 CSS3

Wie kann Sie zwingen, HTML5 iframe YouTube-video zum center passen, decken Sie den full-screen-Fenster-hintergrund mit CSS3 HTML-schließlich Java?

Wie zum Beispiel "paypal.es" home-Seite hintergrund oder "unity3d.com/5" top video, hat als iframe youtube-video.
Die iframe cover Vollbild (Zoom) und decken alle für die Breite und die Höhe, wenn die Größe der Fenster.
Re-size die Aufrechterhaltung der 100% min Breite Zoomen der Höhe oder der 100% min Höhe Zoomen der Breite.

Wie ist dieser Effekt zu erreichen mit iframe HTML5 und CSS3?

Code-Beispiel 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-schließlich Java Hilfe würde geschätzt.

InformationsquelleAutor Alan Mattano | 2014-07-04

  1. 8

    Für eine echte full-screen-Lösung, erreicht werden kann dies so:

    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; }
}

    Es ist nicht perfekt, z.B. es funktioniert nicht gut mit extremen Seitenverhältnissen der container, aber macht einen tollen job in den meisten Situationen. Hier ist ein funktionierendes Beispiel:
    https://codepen.io/anon/pen/zRVLGJ

    Nur ein FYI, dies funktioniert nicht, wenn in einem Karussell oder etwas, was bewegt - die äußeren fixen element bringt Kopfschmerzen.
    Funktioniert gut für mich in einem Karussell. Nur stellen Sie sicher, Sie haben eine Höhe festlegen, die für Ihre Karussell-Folien und video-Bereich einen inneren Behälter mit den angegebenen Parametern aus dieser demo. Ich bin mit dem Glide.js plugin und es funktioniert Super!

    InformationsquelleAutor Hinrich

  2. 2

    Ich denke, das ist, was Sie versuchen zu erreichen:

    .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>

    Dieser wird Ihnen ein video, das füllt den container, es ist in und wird automatisch skaliert, die Höhe auch.

    Ich ursprünglich fand diese Lösung hier: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

    Das gibt die volle Bildschirmbreite, aber nicht Zoomen, also ist es nicht komplett Vollbild für mich.
    Was meinst du mit "nicht Zoomen"?
    Es ist nicht wirklich fullsize, das heißt, es ist ein Rand um das video. es skaliert die Breite oder Höhe, aber nicht beide gleichzeitig.
    Sie müssen die padding-bottom der wrapper entsprechend das Seitenverhältnis des Videos verwendet wird. Der Beispiel-code ist für ein video in 16:9 aber wenn Sie ein video mit einem anderen Seitenverhältnis, dann wird es brauchen, berechnen. Hier finden Sie Ratschläge zur Berechnung der Kennzahlen: css-tricks.com/aspect-ratio-boxes
    Dieser arbeitete für mich. Danke!!!!

    InformationsquelleAutor Sam Willis

Schreibe einen Kommentar