¿Cómo reproducir vídeos de youtube sin tener que añadir el iframe de inserción?

publicado por: Anonymous

He visto una plantilla, que tiene la siguiente estructura:

    <div class="top-grid-left-left-grids">
        <div class="col-md-8 top-grid-left-img">
          <div data-video="Bzt6h5uFWOU" id="video"> 
            <img src="images/f12.jpg" alt="Use your own screenshot.">
            <div id="play" style=""></div> 
          </div>
        </div>
        <div class="col-md-4 top-grid-left-info">
          <a class="text" href="single.html">Fusce ornare congue ligula vel placerat</a>
          <p>Nam id sollicitudin felis. Nulla non bibendum arcu. Vestibulum non venenatis risus.Suspendisse venenatis venenatis mi.</p>
          <div class="t-grid">
            <ul>
              <li><a href="#"><i class="fa fa-clock-o"></i> 2h</a></li>
              <li><a href="#"><i class="fa fa-user"></i> Ornare Congue</a></li>
            </ul>
          </div>
        </div>
        <div class="clearfix"> </div>
    </div>

Donde la imagen previa se muestra en <img src="images/f12.jpg" alt="Use your own screenshot.">

Y el vídeo se reproduce mediante un div

<div id="play" style=""></div>

Este método lo realiza esta demostración de esta plantilla

¿Como puedo reproducir un vídeo con la url del vídeo usando jQuery, sin tener que añadir un iframe de inserción de youtube?

Nota: Los datos de los vídeos y la url de la misma las obtengo mediante una consulta a la base de datos mysqli/php.

solución

A mi funciona de este modo:

HTML

<div id="player"></div>

Javascript (usando la API)

     var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;


window.onYouTubeIframeAPIReady = function() {
//      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '360',
          width: '640',
          videoId: 'N0foNKDe514',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }



      function onPlayerReady(event) {
        event.target.playVideo();
      }


      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }

DEMO

Puedes verlo en jsfiddle, ya que con los code snippet de Stackoverflow no funciona.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *