How to cover Youtube videos with mask images you can make

If you ever wanted to only show a portion of Youtube videos like an horizontal banner, the
way to do is to hide the remaining portions to only show the part you want. That video part
visible is what you want the video to look like.

For the horizontal banner like view, you would have a image that is of same size as the video (same width and height of your choice), that also matches your site’s background color, and add it twice. That would be your mask.

youtube-video-banner-mask

If the site’s background color is white, the mask images should be white as well. The mask
essentially hides the portion of videos by placing those images on top of it, just like a
regular mask.

Let’s take a look at the horizontal banner like view,

youtube-video-banner-mask1

After the Youtube embed code, you add image with top style position specified, twice. Image can be the same, no need 2 images, just add it twice that acts like top and bottom mask. That would act like a mask hiding the parts of video to reveal the horizontal banner like view.

That would look like,

 

How it’s done:

#1 – The video embed code:

This is why Youtube videos work, You set the video’s wmode to be transparent. The regular Youtube video embed is just an IFRAME with no provision to change parameters. So you need to embed videos the old way, code below,

<object width=”560″ height=”315″><param name=”movie” value=”http://www.youtube.com/v/yNk2Ky2cHI-g?fs=1&amp;hl=en_US”></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/yNk2Ky2cHI-g?fs=1&amp;hl=en_US” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”560″ height=”315″></embed></object>

But it misses the wmode parameter, so the new code with wmode parameter would be,

<object width=”560″ height=”315″><param name=”movie” value=”http://www.youtube.com/v/yNk2Ky2cHI-g?fs=1&amp;hl=en_US”></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param>
<param name=”wmode” value=”transparent”>
<embed src=”http://www.youtube.com/v/yNk2Ky2cHI-g?fs=1&amp;hl=en_US” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”560″ height=”315″ wmode=”transparent”></embed></object>

You add the wmode parameter and set it to transparent.

You can copy the code above and change the Youtube’s embed URLs with the one you want in 2 places.

http://www.youtube.com/v/yNk2Ky2cHI-g, you would do that by changing the values after /v/. The value is your video’s link’s v= value.

If you want to embed this Youtube video at http://www.youtube.com/watch?v=A6HYm5nJBiM

You would change this part http://www.youtube.com/v/yNk2Ky2cHI-g to this http://www.youtube.com/v/A6HYm5nJBiM in 2 places. 

That’s your embed code to use.

#2 – The mask images:

You need to have a mask image, that’s of the same background color where the video is going to be on. Mine is white color and is of the size, 560×90 px. You can check that out here. Feel free to use this. You can create mask image to have any shape. A circle, heart, square, anything. Just make sure to use transparent png images for circle or heart shaped masks.

#3 – Putting it all together, The code:

I have IFRAME’d the page where the video with mask images are on. above. You need to do the same if you don’t want to modify your page’s code.  If you want to use it without the IFRAME, you would have to specify the accurate style value for your mask images, especially the top style value.

The full code of the above IFRAME’d Youtube video with mask image is,

That’s the 3 step process to embed Youtube videos with a mask cover. You can change the style of the page layout so the video doesn’t take much space and the texts flow over the mask images.

Tip via Xara.

 

Leave a Reply

Your email address will not be published. Required fields are marked *