This week on YouTube Thursdays, let's look at a very practical how-to type of post. How to Embed YouTube videos and YouTube shorts in your ActiveRain blog post. I have written posts on each of these before. But today is going to be more of a show rather than tell. You'll see the how-to video at the bottom of this post so you can watch.
In the video shown on the right, that is a YouTube short from Emily Berdon (who was featured in an earlier YouTube Thrusdays post, see that link if you want to go check that out). But as you can see with a YouTube short, that it is in a vertical orientation because these are primarly viewed on mobile devices. However, they are NOT exclusive to mobile devices. What if you want to share a good YouTube short within a blog post. There are a couple of things to know and you can do it!
The first thing to know is that you cannot simply get the video URL and then use it with the "insert media" button on the ActiveRain blog toolbar. The video will not show up. Instead, you will need to right click on the YouTube short and in the popup menu, choose "copy embed code". When you come back to the ActiveRain post editor, go into the source code view and paste the embed code. This will give you an iframe container. In my how-to video that you see below, I'm going to show you how to style that iframe container so that the video is "right sized" and also that it has the other text wrapping around it like you see in my example above.
The code that you can use in your YouTube shorts is here:
style="width: 370px;height: 657px;float: right; margin-left: 30px"
Also, in today's how-to video, we'll look at embedding regular YouTube videos. In the blog editor there is the insert media button and all you need to do is paste the video URL into that source field when you click that button. You could stop there, but I'm going to show you a HTML "hack" that will make it even better. You see, the embeded video by default comes in at 560 pixels for the width. That's okay, but our blog post content area is 837 pixels wide. So there is some extra width that is going unused!
In the source code view, I'm going to show you how to add the following code into the video iframe to make the video go all the way across the content area.
style="width: 100%;height: 471px;"
A quick explanation on the above, instead of 560 pixels or any other "fixed" width, we are going to set it to a responsive value of 100%. That means whether you are looking at it on desktop or mobile, the video will always show as big as it is able to. Ideally, I would set the CSS aspect-ratio: 16/9 property so that the height would be automatically calculated, but the active rain blog editor does not allow that setting in HTML mode. So my next best workaround is to fix the height at 471 pixels which is optimized for desktop view and will work also in mobile view.
In our YouTube Thursdays series, we are looking at inspiration videos of what others have done and asking the question "could you do that too?" Here's an example video in that regard explaining 10 Real Estate Words. This is more oriented to new agents, but could you do the same kind of video for first time home buyers? And notice also this video embed is full width of the blog content area. We're using all the pixels available for a nice big view!
Now that I have described what we want to accomplish, now you can watch how to do this in this how to video that I have created.
Featured in BananaTUDE
Comments(12)