Wie kann ich ein YouTube-Video als <video> anstelle eines eingebetteten <iframe> hinzufügen?

Question

Ich muss ein Video in voller Breite auf einer Website einfügen.

Aufgrund von Problemen mit Gewicht und Design, würde ich gerne wissen, ob ich das YouTube-Video als src Attribut einesTags anstelle eines eingebetteten angeben kann.

Ich möchte ein YouTube-Video ohne das Design des Players haben und so kompatibel mit verschiedenen Geräten wie möglich sein (z. B. Browser, Smartphones, Tablets).

Haben Sie Ideen oder Lösungen?

Answer 1

Ich weiß nicht, ob es möglich ist, einen Iframe nicht zu verwenden. Aber Sie können viel vom Design des Youtube-Players ändern. Sollte soweit kompatibel mit mobilen Geräten sein.

Öffnen Sie einfach das Youtube Video. Klicken Sie auf teilen. Klicken Sie auf Einbetten. Klicken Sie auf Mehr anzeigen. Deaktivieren Sie "Player-Steuerelemente anzeigen", "Videotitel und Player-Aktionen anzeigen" und "Empfohlene Videos anzeigen, wenn das Video beendet ist". Kopieren Sie das Iframe-Tag.

Sie können die Breite des Iframes manuell ändern.

Beispiel:

<iframe width="560" height="315" src="https://www.youtube.com/embed/xmhnNUotIaE?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> 

Answer 2

Soweit ich weiß, kann man nicht einbetten Video andere Art und Weise Webseite, den ursprünglichen YouTube-Player (mit iframe).

Sie können den iFrame so positionieren, dass er das Ansichtsfenster ausfüllt und den Inhalt so überlappen lässt, wie es in diesem Post vorgeschlagen wird: http://www.labnol.org/internet/youtube-video-background/27933/? Demo ist hier: http://img.labnol.org/files/video-background.html

<div style="position: fixed; z-index: -99; width: 100%; height: 100%"> 
    <iframe frameborder="0" height="100%" width="100%" 
    src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1"> 
    </iframe> 
</div> 

// Replace ID with the actual ID of your YouTube video 

Sie es auch über Javascript mit API YouTube steuern kann https://developers.google.com/youtube/iframe_api_reference.

Answer 3

Sie können den iFrame reaktionsfähig machen, indem Sie das folgende CSS hinzufügen, was einfacher sein sollte als die Vorgehensweise, die Sie versuchen.

Wenn Sie einen Spieler mit Custom-Look-and-Feel wollen, können Sie Ihr eigenes Skript mit dem Schreib youtube Data API OR a JQuery plugin, die die API

<style> 
 
    .outer-container{ 
 
     width:100% 
 
    } 
 
    .video-container { 
 
     position: relative; 
 
     padding-bottom: 56.25%; 
 
     padding-top: 35px; 
 
     height: 0; 
 
     overflow: hidden; 
 
    } 
 
    .video-container iframe { 
 
     position: absolute; 
 
     top:0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
    } 
 
    </style>

<div class="outer-container"> 
 
<div class="video-container"> 
 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/0afZj1G0BIE" frameborder="0" allowfullscreen></iframe> 
 
</div> 
 
<br> 
 
    <div class="video-container"> 
 
      <iframe width="560" height="315" src="https://www.youtube.com/embed/0afZj1G0BIE" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 
</div>