CODEWITHSUNDEEP
javascriptjqueryhtmlcssyoutube
user3932810
user3932810

Reputation:

Hide the div when youtube video is playing

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

Upvotes: 1

Views: 3561

Answers (2)

3rdthemagical
3rdthemagical

Reputation: 5350

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;
    }
}

Upvotes: 1

Siddharajsinh Zala
Siddharajsinh Zala

Reputation: 71

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/

Upvotes: 0

Related Questions