Home / Questions / 229955
Accepted
Andrés Vélez
Asked: 2020-01-16 14:35:13 +0800 CST 2020-01-16 14:35:13 +0800 CST

playlist with youtube app

  • 772

what I want is to load a playlist from youtube through ajax and for it to play automatically

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" id="content">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=2, shrink-to-fit=no">
    <meta name="robots" content="noindex, nofollow" />
    <meta name="google" content="noindex, nofollow" />
    <meta name=”robots” content=”noimageindex”>
    <title>IQ para todos</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="css/cargando.css"/>
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700" rel="stylesheet">

    <script>


    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;


      function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
            });
          }

          function onPlayerReady(event) {

           $.ajax({
    data:  parametros,
    url:   'controller/changeVideo.php?opcion=leer',
    dataType: "json",
    success:  function (response) {
        $("#player").attr("src", response[1]);
       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();
          }
    </script>
    </head>

    <body >
    <div class="pantalla">
      <div class="mod-left fleft">
        <div class="video fleft">
          <!--<iframe src="https://www.youtube.com/embed/RQMAn68hvYY?rel=0&amp;controls=0&amp;showinfo=0&amp;&autoplay=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>-->
          <iframe id="player" type="text/html" width="640" height="360"
      src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
      frameborder="0"></iframe>
      <!---<div id=player"></div>-->

      </div>
      </div>
      </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" ></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://www.youtube.com/player_api"></script>
      </body>
javascript

2 Answers

  1. You can try this one and tell us:

    <iframe
width="560"
height="315"
src="http://www.youtube.com/embed?listType=playlist&list=PASTE_YOUTUBE_PLAYLIST_ID&autoplay=1"
frameborder="0"
allowfullscreen

    Taken from here: https://stackoverflow.com/questions/5123143/how-to-play-a-playlist-using-youtube-javascript-api

    • 0
  2. Best Answer

    This was the answer that worked for me

     function onYouTubeIframeAPIReady(idVideo) {
        player = new YT.Player('player', {
          height: '360',
          width: '640',
          videoId: 'qUGY0rWZu4Q',
          playerVars : {
                listType:'playlist',
                list: 'PLn5lEmVWb0R8HHSUZ1v-qOVulU6UMl8_B',
                loop: true
            },
          events: {
            'onReady': onPlayerReady,
          }
        });
      }
    • 0