Is there a way for Embeded Youtube videos to play only once?-CodePudding

I'd like for my YouTube video to only be allowed to play once. Is this possible? I'm working with iframe and haven't been able to find anything online. I would appreciate any help on this!

CodePudding user response：

Yes, you can do it. read the iframe api it has a lot of useful functions and variables.

I don't know if you can get the iframe element if it's made in the html but you can make it via Javascript like the API shows.

here's an example of what you are seeking, the iframe doesn't seem to work in the stack snippet. here is a demo : https://jsfiddle.net/215mekhd/

you can also hide the controllers using : playerVars: { 'controls': 0 }, inside the settings object of the second YT.Player parameter.

   
      // 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_id', {
          height: '390',
          width: '640',
          videoId: 'fUXdrl9ch_Q',
          playerVars: {
            'playsinline': 1
          },
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
      }

      
      function onPlayerStateChange(event) {
        if (event.data == 0) {
          player.destroy();
        }
      }

<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player_id">this will be replaced with a video</div>

  </body>
</html>

CodePudding user response：

It should be possible if you set player controls to 0. You can find example of it on this website. It will not make it play once, but will make user unable to interfere with the video in any other way than stopping it.

CodePudding user response：

When doing an embed all that was needed was to add '&autoplay=1' after the video id(the sequence of letters in the video url); now you have add '&mute=1'since YouTube doesn't allow videos to autoplay if they're not muted now. Also your video will only play once by default unless you loop it

This is the embed code without any adjustments:

<iframe width="560" height="315" src="https://www.youtube.com/embed/FJ3Bo2_x_PE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Now with the autoplay and mute attributes:

<iframe width="560" height="315" src="https://www.youtube.com/embed/FJ3Bo2_x_PE?&autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

You can look at this codepen to see it in action