Something I did out of boredom today. Saw lots of blogs embedding their Youtube videos in the same boring style, so I thought it would be nice if we were to add a nice frame around those videos. First I downloaded an image of a picture frame and re-sized it to fit my content area. Then made provisions in the center of that image to fit the default YouTube Video size which in this case is the medium size of 425 x 344.
Created a new ‘div class’ called “vidframe” in my style sheet. Set all the attributes to display and position the video exactly in the center of the image. When I want to “frame” my Videos all I have to do is to wrap the embed codes between the new class I have created. Like this:
<span class="vidframe">All Your YouTube embed codes here</span>
Must say I am quite happy with the result. There are limitations though. You can only embed videos in one size. Anything other than that, you will need to make a new image and create another class in your stylesheet. Maybe on another boring day, I’ll create another one to fit the wide screen videos that are gaining popularity in YouTube.
To create one yourself, just just add a new class in your stylesheet, call it anything you want, make it to display as ‘block’, specify your width and height, text-align: center (important) then add paddings to the top to make the videos sit exactly inside the frame image. My codes looks like this. Your values will definitely be different.
.vidframe {display: block; width:520; height: 440px; text-align: center; background: url(images/vidframe.jpg) no-repeat; padding: 32px 0 0 0; }
The final result.
One Response to “How To Add A Frame Around YouTube Videos In WordPress”
Read below or add a comment...