Comment ajouter une vidéo YouTube en tant que <video> au lieu d'un embedded <iframe>?

- Je insérer une pleine largeur de la vidéo sur un site web.

En raison de problèmes de poids et de design, je voudrais savoir si je peux préciser que la vidéo YouTube que le src attribut d'une <video> tag au lieu de incorporée <iframe>.

Je voudrais avoir une vidéo de YouTube sans la conception de joueur et être compatible avec les différents appareils que possible (par ex. navigateur, smartphones, tablettes).

Vous avez des idées ou des solutions?

  • Vous devez sélectionner une réponse ou spécifier votre question plus loin. Il est unpolite.
InformationsquelleAutor xdxp | 2016-06-13
  1. 1

    Autant que je sache, vous ne pouvez pas incorporer de la vidéo sur la page web de toute autre manière à l'aide de YouTube original joueur (à l'aide d'une iframe).

    Vous pouvez positionner l'iframe pour remplir la fenêtre d'affichage et le contenu pour le chevauche comme ce post suggère: http://www.labnol.org/internet/youtube-video-background/27933/? La démo est ici: 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

    Vous pouvez également le contrôler via Javascript en utilisant les API YouTube https://developers.google.com/youtube/iframe_api_reference.

    • Lien seules réponses ne sont pas autorisés sur DONC. Copier le code correspondant qui répond à la question ici.
    • Pourquoi êtes-vous commenter cette réponse avec un lien sans rapport?
    InformationsquelleAutor actimel
  2. 0

    Vous pouvez faire de l'iframe sensibles par l'ajout de l'en-dessous de CSS, qui devrait être plus facile que l'approche que vous essayez.

    Si vous voulez un joueur avec un aspect personnalisé et se sentir, vous pouvez écrire votre propre script à l'aide de la youtube API de Données OU un plugin JQuery qui utilise l'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

    Je ne sais pas si c'est possible de ne pas utiliser un Iframe. Mais vous pouvez changer beaucoup de la conception du lecteur Youtube. Il devrait être compatible avec des appareils mobiles, pour autant que je sais.

    Il suffit d'Ouvrir la Vidéo sur Youtube. Cliquez sur partager. Cliquez sur Embed. Cliquez sur Afficher plus. Décochez la case "Afficher les commandes du lecteur","Afficher le titre de la vidéo et des actions du joueur" et "Afficher les suggestions de vidéos lorsque la vidéo se termine". Copiez la balise Iframe.

    Vous pouvez modifier la largeur de l'iframe manuellement.

    exemple:

    <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