Today's video lesson is going to look at considerations you should use when creating an embedded video from YouTube. There is a little mathematics involved, but don't run away, I'll give you the answers you need!
We're going to use one of our VBloggers experts Debb Janes to illustrate some points (thanks Debb for volunteering hehe)!
The goal at the end of the day is to embed a YouTube video into an ActiveRain blog post. There are several things to consider to get this perfect and it is EASY to miss a few important points. Let me show you what I mean. First of all, let's break down a YouTube embed into its components. That will help as the discussion goes along.
You can see that the video frame is in widescreen 16:9 format which means that the width is 178% of its height. At the bottom of the video is a toolbar where you can pick playback options, set your volume level, and scrub through the video by dragging on the slider. That toolbar is 35 pixels tall. We'll come back to that number in a moment.
Our main AR blog pages give us 684 pixels of content space which means that we could choose one of the "standard size options" for embedded videos which is 640 pixels wide. Now that would be EASY, but alas, you need to know one more thing first.
When you create a blog post in AR, you have the option to post your content onto Hyper Local pages. You can pick a state-county-city-and even neighborhood level of drill down as is applicable. This allows AR to post your info on various local information pages so that more sets of consumer eyeballs have potential of seeing it. One of the places your information will land at is called localism.com. Your content is syndicated there automatically for you. One of the things about localism pages, is that it was designed with a vary narrow content area specifically of 493 pixel width. You can see this in the illustration below:
AR syndication automatically takes any of our images/photos and auto-scales them down to fit for us. However with video, it doesn't have the ability to auto-adjust these objects. They are simply chopped off at the edge which means everything on the right side of the video just will not be seen. So my lesson in this respect is you should do custom size embeds for your blog posts when you know you are going to post to "hyper-local" pages.
Now we have to talk about a couple more things! YouTube allows you to type any custom size you want for your embedded videos. However the formula it uses to auto-calculate the height when you type in the width is WRONG! Their calculation does not factor in those 35 pixels correctly that I talked about up above. (You'll see the result below. You get vertical black pillar boxes on your video frame. If you want to learn about letter boxes and pillar boxes, read the rest of my video instruction series.) If you take a 493 wide video by the 178% aspect ratio and then add on 35 pixels for height, you get the total of 312 pixels high. So your custom embeds in this particular case should be 493 x 312. Good news is that embed code is simply in text format that it is easy to override AFTER you paste it into your blog posts!
You'll also notice that when it comes to embedding in AR, it is good to select "use old embed code" option. *(see above) That way when you toggle between normal WYSIWYG and HTML views of your blog post in the editor, you will not lose your video embed. If you don't do this, the video code that you get will not stay when you toggle between these two views!
Whew! Did you get all that? Well, I think I did the hard parts for you. Your takeaways are: (1) custom size embeds when hyper-local at 493 x 312 and (2) use "old embed code" - now that was EASY! ;)
Now here is Debb's video with the parameters we have been talking about:
this is part #10 of a video instruction series - be sure and check out
my other posts if video is something you are interested in video tips for your business
Comments(60)