Showing text on full Screen Video

Question

I wrote a small code using videojs library which plays ads video before playing actual video. I wanted a div tag which should appear on ad video and it works just fine the only problem is when the video goes fullscreen the label doesn't show up.

Here's my html code

<div class="videoContainer">
    <video id="video_1" class="video-js playads" height="200px" width="300px" video-url="http://vjs.zencdn.net/v/oceans.mp4" mimetype="video/mp4" controls controlsList="nodownload" preload="none" data-setup=''>
        <!-- ad source ad ad video url   -->
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4' />
    </video>
    <!-- text to be displayed while playing ad   -->
    <div class="advertisement hide">Advertisement</div>
</div>

CSS Code:

.videoContainer {
    max-width: 300px;
    position: relative;
    margin: 20px auto 0;
}
.advertisement{
    position:absolute;
    color: rgb(230, 200, 98);
    padding: 5px 10px;
    text-align: right;
    background: rgba(0, 0, 0, 0.4);
    bottom: 50px;
    right:0;
    font-size: 14px;
    font-weight: 700;
    z-index: 1 !important;
}
.hide{
    display:none;
}

And Javascript Code is:

$(document).ready(function(){
    var videotag = $('.playads');
    var myPlayer = videojs('video_1');
    // show advertisement label while play advertisement
    myPlayer.on('play', function() {
        if(myPlayer.hasClass("playads")){
            $('.advertisement').removeClass('hide');
        }
    });
    // Stop from seeking while playing advertisement
    myPlayer.on("seeking", function(event) {
        if (currentTime < myPlayer.currentTime() && myPlayer.hasClass("playads")) {
            myPlayer.currentTime(currentTime);
        }
    });
    myPlayer.on("seeked", function(event) {
        if (currentTime < myPlayer.currentTime() && myPlayer.hasClass("playads")) {
            myPlayer.currentTime(currentTime);
        }
    });
    setInterval(function() {
        if (!myPlayer.paused() && myPlayer.hasClass("playads")) {
            currentTime = myPlayer.currentTime();
        }
    }, 1000);

    // Hide Advertisement label and change data-src of player to play actual video
    myPlayer.on('ended', function() {
        if(this.hasClass("playads")){
            this.src({type: videotag.attr('mimetype'), src: videotag.attr('video-url')});
            this.play();
            this.removeClass('playads');
            $('.advertisement').addClass('hide');
        }
    });
});

what am i missing here? is it videojs?

Here is a link to my pen: https://codepen.io/isheikhspear/pen/RjMOgw?editors=0010

Answer 1

This can be accomplished by moving your argument inside of video.js's wrapper. So your new HTML would be:

<div class="videoContainer">
<!-- Add some extra attribute as video-url and mimetype which we can later play once we are done playing ads  -->
  <video id="video_1" class="video-js playads" height="200px" width="300px" video-url="http://vjs.zencdn.net/v/oceans.mp4" mimetype="video/mp4" controls controlsList="nodownload" preload="none" data-setup=''>
<!-- ad source ad ad video url   -->
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4' />
</video>
<!-- text to be displayed while playing ad   -->
  <div class="moveToVideoJs">
    <div class="advertisement hide">Advertisement</div>
  </div>
</div>

After initializing your video.js, you should then move your div that contains stuff we want to move to video.js to video.js.

$(".moveToVideoJs")
  .appendTo($('#video_1'));

Here's a link to the new CodePen.