Display a`Section` after 2 minutes of clicking the video play button on Youtube

Question

In a video uploaded on Vimeo I learned how to do, now on Youtube I’m not getting through.

My situation is, I have a div where inside I have a iframe with the embedded video. What I need is to take the event from the click on the play of the video, so that with this I create a condition that after two minutes I display a section.

I tried using the Google API, but as my knowledge in JS is beginner, my attempts were unsuccessful.

Here the div that contains my video

<div class="row">
    <div class="col-sm-7 wow animated rotateIn" data-wow-duration="2s" style="margin: 0 auto; width: 50%;">
        <iframe width="100%" height="423" src="https://www.youtube.com/embed/1lcKDZ-RJb0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>

and here the div which must be displayed after the 2 minutes that the video was started

 <section class="conteudo-delay" style="display: none;">
            <div class="row">
                <div class="col-sm-8 text-center" style="margin: 0 auto; width: 50%;">
                    <a href="#">
                        <button class="mt-3 btn_compra">
                            ATUALIZE SEU PEDIDO AGORA MESMO!
                        </button>
                    </a>
                </div>
            </div>
</section>

Answer 1

You could use this youtube iframe API. Basically what you need to do to solve your problem (I hope), and add a script to import this API. Enter it via tag:

<script
   data-js="yt_api"
   src="https://www.youtube.com/player_api"
></script>

In his div containing the iframe, place an attribute id="ytplayer" which I will use to manipulate via Javascript, this way:

<div class="row">
  <!-- este id aqui -->
  <div
    id="ytplayer" 
    class="col-sm-7 wow animated rotateIn"
    data-wow-duration="2s"
    style="margin: 0 auto; width: 50%"
  >
    <iframe
      id="player"
      width="100%"
      height="423"
      src="https://www.youtube.com/embed/1lcKDZ-RJb0"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
  </div>
</div>

Now comes the manipulation via Javascript. Let’s start the youtube API object with the function onYouTubePlayerAPIReady:

<script>
  let player;

  const conteudoDelay = document.getElementsByClassName(
    'conteudo-delay',
  )[0];

  // 1. ytplayer code: https://developers.google.com/youtube/player_parameters#IFrame_Player_API
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '360',
      width: '640',
      videoId: '1lcKDZ-RJb0',
    });
  }

  const interval = setInterval(() => {
    console.log(Math.ceil(player.playerInfo.currentTime));

    if (Math.ceil(player.playerInfo.currentTime) >= 5) {
      conteudoDelay.setAttribute('style', 'display: block'); // agora o section vai aparecer
      clearInterval(interval); // encerra execucao do interval
    }
  }, 1000);
</script>

Where:

• videoId iframe video id. In your case '1lcKDZ-RJb0'.

• conteudoDelay and the service that we will change the display: none for display: block after 5 seconds. I adopted 5 seconds just to facilitate the test.

• That script interval server to update every second (1000 ms) and check the elapsed time of the player, through the player.playerInfo.currentTime. We’ll make a if to check, in this test example, if the player time is greater than or equal to 5 seconds.

• conteudoDelay.setAttribute('style', 'display: block'); we will display the Section after 5 seconds

Complete code

<div class="row">
  <!-- este id aqui -->
  <div
    id="ytplayer"
    class="col-sm-7 wow animated rotateIn"
    data-wow-duration="2s"
    style="margin: 0 auto; width: 50%"
  >
    <iframe
      id="player"
      width="100%"
      height="423"
      src="https://www.youtube.com/embed/1lcKDZ-RJb0"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
  </div>
</div>

<section class="conteudo-delay" style="display: none">
  <div class="row">
    <div class="col-sm-8 text-center" style="margin: 0 auto; width: 50%">
      <a href="#">
        <button class="mt-3 btn_compra">
          ATUALIZE SEU PEDIDO AGORA MESMO!
        </button>
      </a>
    </div>
  </div>
</section>

<script
  data-js="yt_api"
  src="https://www.youtube.com/player_api"
></script>

<script>
  let player;

  const conteudoDelay = document.getElementsByClassName(
    'conteudo-delay',
  )[0];

  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '360',
      width: '640',
      videoId: '1lcKDZ-RJb0',
    });
  }

  const interval = setInterval(() => {
    console.log(Math.ceil(player.playerInfo.currentTime));

    if (Math.ceil(player.playerInfo.currentTime) >= 5) {
      conteudoDelay.setAttribute('style', 'display: block'); // agora o section vai aparecer
      clearInterval(interval); // encerra execucao do interval
    }
  }, 1000);
</script>

Test this code and see if it solves your problem.

Obviously the code can be refactored and improved. The video id can be acquired dynamically as well, but in this case I assume Voce will manually set the video id.