How to Mask the mb.YTPlayer background video

Do you need to display your Youtube hosted video as background of your page with a mask that cover part of it?

EFFECT

With the last 3.0 release of my YTPlayer plugin I introduced the ability to create a mask (simply a PNG file) that covers the player giving at the video you are playing a particular effect.

First you need to create your mask; the mask is a an image with transparency saved as png. For example, if you need to create a vignette effect you have to create an image that start from black from the border to degrade to full transparency on the center. You can do that using Photoshop® or any other graphic program you have. The image size should be big enough to fit a HD resolution screen; 1920 x 1080 pixel works quite well. Of course the most the image is complex the most it will be heavy so take things simple.

Here is one of the mask I used for the demo:

MASK2

Now that we have the mask image you just need to setup your background video using the jquery.mb.YTPlayer plugin.

It’s quite simple, just include the jquery.mb.YTPlayer.js javascript and the jquery.mb.YTPlayer.min.css CSS file you find in the dist folder of the plugin package on the head of your HTML page:

<link href="../dist/css/jquery.mb.YTPlayer.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script src="/dist/jquery.mb.YTPlayer.min.js"></script>

Choose the video you want as background of your HTML page and  add a DIV element wherever you want in the page code after the BODY with all the options for the video you want to show:

<div id="bgndVideo" class="player" data-property="{videoURL:'9d8wWcJLnFI',containment:'body', showControls:true, autoPlay:true, loop:false, vol:50, mute:false, startAt:0,  stopAt:296, opacity:1, addRaster:true, quality:'large', optimizeDisplay:true}">My video</div>

Now you can add the YTPlayer initialize javascript function just in the HEAD or at the bottom of your page:

<script>
jQuery(function () {
    var myPlayer = jQuery("#bgndVideo").YTPlayer();
    myPlayer.YTPAddMask('assets/mask-1.png')
})
</script>

As you can see from the code, the YTPAddMask method is invoked just after the initialize function. You can also take advantage of the YTPTime event trigger to change the mask at a specific timestamp:

      
        myPlayer.on("YTPTime", function (e) {
            var currentTime = e.time;
            /**
             * Change mask at specific timestamp
             */
            switch (currentTime) {
                case 1:
                    myPlayer.YTPAddMask('assets/mask-2.png');
                    break;
                case 10:
                    myPlayer.YTPAddMask('assets/mask-1.png');
                    break;
                case 20:
                    myPlayer.YTPAddMask('assets/mask-4.png' );
                    break;
            }
        });

The methods exposed by the component to manage the mask are:

$.fn.YTPAddMask(“path/to/mask”)
Add a mask to the target video player. If you call the YTPAddMask method while a mask has been already applied the previous mask will be replaced.
For example:


1
&lt;button onclick="jQuery('#[playerID]').YTPAddMask('assets/mask-1.png')"&gt;Add Mask&lt;/button&gt;

$.fn.YTPRemoveMask()
Remove the previously applied mask from the target video player.
For example:


1
&lt;button onclick="jQuery('#[playerID]').YTPRemoveMask()"&gt;Remove Mask&lt;/button&gt;

See the demo    Get the code

And don’t forget to make a donation if you find it useful for your website 😉