How to add YouTube video als <video> statt eines eingebetteten <iframe>?

Ich einfügen müssen in voller Breite ein video auf eine website.

Wegen der Probleme von Gewicht und design, ich würde gerne wissen, ob ich angeben kann das YouTube-video als src Attribut eines <video> - tag anstelle eines eingebetteten <iframe>.

Ich würde gerne ein YouTube-video, ohne das design der Spieler und werden als kompatibel mit verschiedenen Geräten wie möglich (z.B. browser, smartphones, tablets).

Haben Sie irgendwelche Ideen oder Lösungen?

  • Sie sollten wählen Sie eine Antwort aus oder geben Sie Ihre Frage weiter. Es ist unpolite.
InformationsquelleAutor xdxp | 2016-06-13
  1. 1

    Soweit ich weiß, kann man nicht einbetten, video auf Webseite andere Weise, die die Verwendung der originalen YouTube-player ein (iframe).

    Können Sie die position der iframe füllen Sie den Arbeitsbereich und lassen Sie die Inhalte zu überlagern, wie dieser Beitrag vermuten lässt: 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

    Können Sie auch Steuern, es per Javascript mittels YouTube-API https://developers.google.com/youtube/iframe_api_reference.

    • Link nur Antworten dürfen nicht auf DAMIT. Kopieren Sie den zugehörigen code, beantwortet die Frage hier.
    • Warum sind Sie kommentierte diese Antwort mit einem fremden link?
    InformationsquelleAutor actimel
  2. 0

    Können Sie die iframe reagiert durch hinzufügen der unten CSS, das sollte einfacher sein, als die Methode, die Sie versuchen.

    Wenn Sie möchten, dass ein Spieler mit custom-look und das Gefühl, Sie können schreiben Sie Ihre eigenen Skript, mit dem youtube Daten API ODER ein JQuery-plugin nutzt die API

    CSS:

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

    HTML:

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

    InformationsquelleAutor SML
  3. 0

    Ich weiß nicht, ob seine mögliche, um nicht mit einem Iframe. Aber Sie können ändern, eine Menge von der Gestaltung des Youtube-players. Sollte kompatibel mit mobilen Geräten soweit ich weiß.

    Öffnen Sie einfach die Youtube-Video. Klicken Sie auf teilen. Klicken Sie auf Einbetten. Klicken Sie auf mehr Anzeigen. Deaktivieren Sie "Show player-Steuerelemente","video-Show-Titel und die Aktionen der Spieler" und "vorgeschlagene videos, wenn das video beendet". Kopieren Sie den Iframe-tag.

    Können Sie ändern Sie die Breite des iframe manuell.

    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>
    InformationsquelleAutor Tom
Schreibe einen Kommentar