How To Embed YouTube Video – Cool Trick To Spice Up The YouTube Player

Most of the embedded videos we see on a web site has the default YouTube video player. Wouldn’t you like to customize it a bit and make your video stand out from the rest?

How did I do that? There is a small trick you can apply. This involves some minor CSS work. Don’t worry. You don’t need to be an expert with HTML or CSS. I’ll show you the exact steps on how to get it done.

What you need

1. Uploaded YouTube image background
This would be the image that you will add as the background for the player.
It can be a eye catching border image, a image that has your business logo or even just a simple color background.

Make sure that the image height and width are in line with the YouTube video player dimensions. It doesn’t have to be the exact same, but definitely should be higher that the video dimensions otherwise, you will not be able to see the background.

2. The embed code of the YouTube video
You can get the embed code from the YouTube video page.

How to embed with a video with a custom background

1. Copy the embedded video code to the HTML page you are about to add the video.
2. Include a DIV tag, surrounding the embedded video code
3. Add a background image to the DIV tag
4. Add CSS padding tag if the image is larger than the dimensions of the YouTube video

Do you know of any other ways to include a background image while embedding a YouTube video? Leave a comment, I’d like to know.

Related Posts Plugin for WordPress, Blogger...
Twitter Digg Delicious Stumbleupon Technorati Facebook Email

No comments yet... Be the first to leave a reply!

Content Protected Using Blog Protector By: PcDrome.