Hide the div when youtube video is playing

Question

I have a youtube video embedded on page which has an overlapping div on it. As the div is overlapping the video,it is not possible to access the videos controllers.

How do I hide the overlapping div when video starts playing and show it again when the video stops playing.

Here is my embedded code

<div class="wrap">
    <iframe id="player" type="text/html" width="640" height="390"
      src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"
      frameborder="0">
    </iframe>
    <div class="title">
      Hide this div when video starts playing and show it when video is paused
    </div>
 </div>

Demo

I suggest you to use HTML5 video tag and use their properties http://stackoverflow.com/a/8601183/5965782 — va2ron1, Apr 06 '16 at 10:46
unable to use the video tag for some browser compatibility issues — , Apr 06 '16 at 10:53

3rdthemagical · Accepted Answer · 2016-04-07T10:16:15.690

You can use youtube api. Check code below. Multiple videos support.

Demo

Html

<div class="wrap js-player" id="1">
    <div class="js-video" data-id="1" data-src="CJlKYk9lbqg"></div>
    <div class="js-title">
        Hide this div when video starts playing and show it when video is paused
    </div>
</div>

<div class="wrap js-player" id="2">
    <div class="js-video" data-id="2" data-src="u1zgFlCw8Aw"></div>
    <div class="js-title">
        Hide this div when video starts playing and show it when video is paused
    </div>
</div>

Css

.wrap {
  position: relative;
  display: inline-block;
  height: 390px;
  width: 640px;
}

.js-title{
  background:rgba(255, 0, 0, 0.7) ;
  padding: 20px;
  position: absolute;
  bottom: 0; 
  left:0; 
  right:0;
  color: white; 
  font-size: 20px
}

Js

var YT = {
    PlayerState: {
        ENDED: 0,
        PLAYING: 1,
        PAUSED: 2,
        BUFFERING: 3,
        CUED: 4
    }
};

function embedScript() {
    var tag = document.createElement('script');

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

function onYouTubeIframeAPIReady() {
    var players = document.getElementsByClassName('js-player');

    if (players.length) {
        for (var i = 0; i < players.length; i++) {
            var jsPlayer = players[i];
            var jsVideo = jsPlayer.getElementsByClassName("js-video")[0];
            var videoUrl = jsVideo.dataset.src;


            var player;
            player = new YT.Player(jsVideo, {
                height: '390',
                width: '640',
                videoId: videoUrl,
                playerVars: {'rel': 0},
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
        }
    } else {
        console.log('No videos');
    }
}

function onPlayerStateChange(event) {
    var videoContainer = document.getElementById(event.target.l.dataset.id);
    var jsTitle = videoContainer.getElementsByClassName("js-title")[0];

    switch (event.data) {
        case YT.PlayerState.PAUSED:
            jsTitle.style.display = "block";
            break;
        case YT.PlayerState.PLAYING:
            jsTitle.style.display = "none";
            break;
    }
}

@user3932810 Look at embedScript() function. We create a script tag with src="https://www.youtube.com/iframe_api" and insert this script on the page. Also jQuery is used, see codepen. — 3rdthemagical, Apr 06 '16 at 12:25
I used the same here in [JSfiddle DEMO](http://jsfiddle.net/ApK7X/202/) but it is not working here. any idea why? — , Apr 07 '16 at 06:38
@user3932810 Hi. I changed my code and paste it to jsFiddle - http://jsfiddle.net/m7g83zqk/ Your mistakes were: 1) you forgot to include jQuery; 2) You still used iframe element instead of div. I fixed code. Now it works without jq. And you can pass video id through data-src attribute of **div** element. Css has changes too. — 3rdthemagical, Apr 07 '16 at 08:36
Thnk you. but what if there are multiple videos? for example in my case videos are in image gallery so there are multiple videos. Passing video link through script is not advisable for multiple videos rite? — , Apr 07 '16 at 09:26

score 0 · Answer 2 · answered Apr 06 '16 at 11:02

Try this. alert box will appear when video is finished. you can change a condition as per your video state. In play condition you can hide div and on pause condition you can show div using script.

-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued)

http://jsfiddle.net/7Gznb/

Hide the div when youtube video is playing

2 Answers2