pupunzi.open-lab.com
How to Mask the mb.YTPlayer background video | Pupunzi
Do you need to display your Youtube hosted video as background of your page with a mask that cover part of it? 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: 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