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.
