Turn background video (ambient video) into a playable video on button click

Question

I have created an iframe by taking advantage of YouTube's API.

On page load, the ambient video is set to autoplay with no sound. However, on top of the div which contains the iframe, I have a button.

On this button click, I want the video to reset (start from the beginning) with the YouTube controls and sound on - similar to the one in the hero here: https://www.hugeinc.com/work.

Wondering how I would go about this? Would it involve creating another iframe?

Not looking to do this as a modal pop-up

Code:

//  Load  IFrame Player 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);

// Creating iframe
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    videoId: 'jagIsKF8oVA',
    playerVars: {
      'autoplay': 1,
      'controls': 0,
      'mute': 1,
      'loop': 1,
      'rel': 0
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

//  Calls function
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();
}

<!-- THIS IS IN home.php-->

<button>Click me</button>

<!-- THIS IS IN hero.php -->
<section id="videoHero" class="hero hero--video">
  <div class="hero__container--teaser">
    <!-- Where the iframe is stored-->
    <div id="player"></div>
  </div>
</section>

    

Not looking to do this as a modal pop-up. Similar to the functionality here: https://www.hugeinc.com/work (play button on hero is clicked, video resets and plays from the start with controls at the bottom).

Answer 1

I used another iframe because there is no method to change the controls display you may check https://developers.google.com/youtube/iframe_api_reference for more information or you can do console.log(player) and ckeck all the methods.

I used

contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')

to stop the iframe and

contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*')

to restart it also for this two line of code to work I added &enablejsapi=1 to the iframe src

also I used the YouTube Player API for the muted video so that it will loop whiteout refresh (in case of not using the YouTube Player API for the video to loop you need to add to the src of the iframe playlist=videoId&loop=1 and this will make the iframe refresh when the video end)

I haven't added showinfo=0 to the muted video because it is deprecated and will be ignored after September 25, 2018. you may check https://developers.google.com/youtube/player_parameters#showinfo for more info

Lastly the snippet doesn't work . you need to make local html file or delete sandbox from the sinppet iframe then click on Run code snippet a second time

var modalTeaser = document.getElementById('hero__container--teaser');
  var btn = document.getElementById("myBtn");
  var iframe = document.getElementById("iframe");
  var span = document.getElementsByClassName("close")[0];
  var videoId = '88xPxULx-II';
  
  var tag = document.createElement('script');
  tag.id = 'iframe-demo';
  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('iframe', {
        videoId: videoId,
        playerVars: {
          'autoplay': 1,
          'controls': 0,
          'mute': 1,
          'loop': 1
        },
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
    });
  }
function onPlayerReady(event) {
  event.target.playVideo();
}
function onPlayerStateChange(event) {
  if (event.data === YT.PlayerState.ENDED) {
      player.playVideo(); 
  }
}

var video = document.createElement('iframe');
video.className = "ply";
modalTeaser.prepend(video);
video.style.display = 'none';

video.src = "https://www.youtube.com/embed/"+videoId+"?enablejsapi=1";
video.setAttribute('frameborder', "0");
btn.onclick = function() {
  iframe.style.display = "none";
  video.style.display = "block";
  btn.style.display = "none";
  span.style.display = "block";
  video.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*')
}

span.onclick = function() {
  iframe.style.display = "block";
  video.style.display = "none";
  btn.style.display = "block";
  span.style.display = "none";
  video.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
}

body {
  margin: 0;
}
.close{
  z-index: 10;
  position: relative;
  display: none;
}
.ply{
  z-index: 2 !important;
}
#videoHero {
  position: relative;
  padding-bottom: calc((544 / 1280) * 100%);
  background-color: rgba(255, 0, 0, .1)
}

.hero__container--teaser {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}
.modal{
  width: 80%;
  height: 80%;
  background-color: black;
}

/* Having the following on the iframe moves the iframe out of the div (and visual). Not having them puts
the iframe in the div, but not full width not height of #videoHero*/

#player,
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
}

#myBtn {
  position: absolute;
  top: 80px;
  left: 300px;
  z-index: 10;
  width: 100px;
  height: 100px;
  background-color: red;
}

.modal {
  display: none;
  position: fixed;
  z-index: 122;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.modal-content {
  z-index: 400;
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

<section id="videoHero" class="hero hero--video">
<button type="button" class="close" data-dismiss="modal" aria-               label="Close">
           <span aria-hidden="true">&times;</span>
    </button>
  <div id="hero__container--teaser" class="hero__container--teaser">
    <!-- #player is where the iframe is-->
    <div id="iframe" ></div>
  </div>
  <button id="myBtn">Start video</button>
</section>