web-dev-qa-db-fra.com

Intégrer une vidéo YouTube HTML5 sans iframe?

Est-il possible d'intégrer une version html5 d'une vidéo youtube sans utiliser d'iframe?

javascriptjqueryhtml5youtube
35
user2217162

Voici un exemple d'intégration sans iFrame:

<div style="width:100%;height:100%;width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;">
  <embed src="http://www.youtube.com/v/GlIzuTQGgzs?version=3&amp;hl=en_US&amp;rel=0&amp;autohide=1&amp;autoplay=1" wmode="transparent" type="application/x-shockwave-flash" width="100%" height="100%" allowfullscreen="true" title="Adobe Flash Player">
</div>

comparer au code "embed" iframe standard de YouTube:

<iframe width="854" height="510" src="//www.youtube.com/embed/GlIzuTQGgzs" frameborder="0" allowfullscreen></iframe>

et aussi loin que HTML5, utilisez la balise <object> comme suit (corrigé):

<object style="width:100%;height:100%;width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;" data="http://www.youtube.com/embed/GlIzuTQGgzs">
</object>

18
anapsix

Oui. Youtube API est la meilleure ressource pour cela.

Il y a 3 façons d'intégrer une vidéo:

  • IFrame intègre à l'aide des balises <iframe>
  • IFrame intègre à l'aide de l'API IFrame Player
  • L'objet AS3 (et AS2 *) incorpore DEPRECATED

Je pense que vous recherchez le second d'entre eux:

IFrame intègre à l'aide de l'API IFrame Player

Le code HTML et JavaScript ci-dessous montre un exemple simple qui insère un lecteur YouTube dans l'élément de page ayant la valeur id de ytplayer. La fonction onYouTubePlayerAPIReady () spécifiée ici est appelée automatiquement lorsque le code de l'API IFrame Player a été chargé. Ce code ne définit aucun paramètre de lecteur et ne définit pas non plus d’autres gestionnaires d’événements.

<div id="ytplayer"></div>

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    });
  }
</script>

Voici quelques instructions où vous pouvez jeter un oeil lorsque vous commencez à utiliser l'API.

Un exemple d'intégration sans utiliser iframe consiste à utiliser la balise <object>:

<object width="640" height="360">
    <param name="movie" value="http://www.youtube.com/embed/yt-video-id?html5=1&amp;rel=0&amp;hl=en_US&amp;version=3"/
    <param name="allowFullScreen" value="true"/>
    <param name="allowscriptaccess" value="always"/>
    <embed width="640" height="360" src="http://www.youtube.com/embed/yt-video-id?html5=1&amp;rel=0&amp;hl=en_US&amp;version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>

(remplacez yt-video-id par votre identifiant vidéo)

JSFIDDLE

8
Ionică Bizău

Oui, mais cela dépend de ce que vous entendez par «intégrer». pour autant que je sache, après avoir lu la documentation, il semble que vous disposiez de plusieurs options si vous souhaitez utiliser l’API iframe. Vous pouvez utiliser les API javascript et flash ( https://developers.google.com/youtube/player_parameters ) pour intégrer un lecteur, mais cela implique de créer des objets Flash dans votre code (ce que j’évite personnellement, mais pas nécessairement. quelque chose que vous devez). Vous trouverez ci-dessous quelques sections utiles des documents de développement pour l'API Youtube.

Si vous voulez vraiment contourner toutes ces méthodes et inclure la vidéo sans aucune sorte d'iframe, alors votre meilleur pari pourrait être de créer un lecteur/une application vidéo HTML5 pouvant se connecter à l'API Youtube Data ( https://developers.google .com/YouTube/v3/ ). Je ne sais pas quelle est l'ampleur de vos besoins, mais ce serait la voie à suivre si vous voulez {vraiment} _ utiliser des iframes ou des objets flash. 

J'espère que cela t'aides!

Utile:

( https://developers.google.com/youtube/player_parameters )

IFrame intègre à l'aide de l'API IFrame Player

Suivez les instructions de l’API de lecteur IFrame pour insérer un lecteur vidéo dans votre page Web ou votre application après le chargement du code JavaScript de cette dernière. Le deuxième paramètre du constructeur du lecteur vidéo est un objet qui spécifie les options du lecteur. Dans cet objet, la propriété playerVars identifie les paramètres du lecteur.

Le code HTML et JavaScript ci-dessous montre un exemple simple qui insère un lecteur YouTube dans l'élément de page ayant la valeur id de ytplayer. La fonction onYouTubePlayerAPIReady () spécifiée ici est appelée automatiquement lorsque le code de l'API IFrame Player a été chargé. Ce code ne définit aucun paramètre de lecteur et ne définit pas non plus d’autres gestionnaires d’événements.

...

IFrame intègre à l'aide de balises

Définissez une balise dans votre application dans laquelle l'URL src spécifie le contenu que le lecteur va charger, ainsi que tous les autres paramètres de lecteur que vous souhaitez définir. Les paramètres de hauteur et de largeur de la balise spécifient les dimensions du lecteur.

Si vous créez vous-même l'élément (plutôt que d'utiliser l'API d'IFrame Player pour le créer), vous pouvez ajouter les paramètres du lecteur directement à la fin de l'URL. L'URL a le format suivant:

...

Objet AS3 embarque

Les incorporations d'objets utilisent une balise pour spécifier les dimensions et les paramètres du joueur. L'exemple de code ci-dessous montre comment utiliser un objet incorporé pour charger un lecteur AS3 lisant automatiquement la même vidéo que les deux exemples précédents.

1
markthethomas

Utilisez la balise object:

<object data="http://iamawesome.com" type="text/html" width="200" height="200">
  <a href="http://iamawesome.com">access the page directly</a>
</object>

Réf: http://debug.ga/embedding-external-pages-without-iframes/

0
jamaco