Javascript – Play Youtube video on click

htmliframejavascriptyoutubeyoutube-api

I'm using Youtube API, and have several Divs as thumbnails. When one thumbnail (div) is clicked, the corresponding Youtube video should play. I'm using an iframe element for the video, and the webpage is made up of only HTML, CSS and JavaScript. If I don't use a button (thumbnails/div with onclick) but rather have a blank page with the Youtube API JavaScript code, it'll work. However, when I try to wrap everything inside a function call (from the div's onclick) nothing happens, but I get this error.

"Refused to execute script from 'https://www.youtube.com/embed/HVldRjNb4BE' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled."

Here is my code:

HTML:

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

JavaScript:

// 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

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

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      //setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }

This code is just copied from https://developers.google.com/youtube/iframe_api_reference.

When this is all I have in the document, a player is there when the page loads, and the video is ready to play.
So to clarify my question, how can I make it so that when a user clicks one of the buttons (div) the Youtube player displays and play the video?

Best Answer

Hello i think this will help you : 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Play Youtube Video On Click</title>
    </head>
    <body>
        <button onclick="myFunction();return false;">Click me</button>
        <div id="video"></div>

        <script>
            function myFunction() {
                document.getElementById("video").innerHTML = "<div id='player'></div>";

                // 2. This code loads the IFrame Player API code asynchronously.
                var tag = document.createElement('script');

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

            // 3. This function creates an <iframe> (and YouTube player)
            //    after the API code downloads.
            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    height: '390',
                    width: '640',
                    videoId: 'M7lc1UVf-VE',
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }

            // 4. The API will call this function when the video player is ready.
            function onPlayerReady(event) {
                event.target.playVideo();
            }

            // 5. The API calls this function when the player's state changes.
            //    The function indicates that when playing a video (state=1),
            //    the player should play for six seconds and then stop.
            var done = false;
            function onPlayerStateChange(event) {
                if (event.data == YT.PlayerState.PLAYING && !done) {
                    //setTimeout(stopVideo, 6000);
                    done = true;
                }
            }
            function stopVideo() {
                player.stopVideo();
            }
        </script>
    </body>
</html>
Related Topic