And so, sharing YouTube videos across various platforms such as social media have been made easy with the help of YouTube's sharing option.
However, embedding videos on an article, blog post, or website can be quite problematic.
An embedded video can be wrongly displayed if embedding process wasn't properly made.
Take a look at this example.
If you can see, the first embedded youtube video (wrong), the full thumbnail wasn't displayed correctly. Instead, the thumbnail was zoomed in which made it look like confusing and deceiving.
While looking at the second photo (correct), the full thumbnail was displayed correctly. It was because the correct embed code was inserted in the post.
So if you're searching for a way to embed your YouTube videos in a better look, then this tutorial is for you.
Steps to Embed YouTube Video Displaying Full Thumbnail in a Blog Post:
1. Go to YouTube in your browser and find the video you want to embed.
2. Click the Share button and click 'Embed'.
3. Copy the unique embed code and paste it in your notepad for later use.
This will be used to paste in the correct embed code later.
4. Next, copy this correct embed code.
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/vml8ds6ou2g" width="560"></iframe></div>
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
Replace the blue text with the unique video embed code you have copied from YouTube.
Tip: Just highlight the tags starting from <iframe to </iframe> then paste your unique embed code so that it will be easily replaced.
After that, highlight the whole modified code and then copy it.
5. Go to your Blogger dashboard and select 'Posts'.
6. Choose the post where you want your YouTube video to appear.
7. Click 'HTML'.
8. Find where you want to paste the code.
It's best to paste it after </div> tags.
9. Paste your embed code and then hit 'Update' or 'Publish'.
10. Visit your post and see the result.
Note that if you only copied and pasted the embed code which Youtube provided you, you'll really come up with the incomplete displayed thumbnail just like my example above.
So better copy the code I've provided in this post and just replace the <iframe to </iframe> with your unique embed code, so that you'll come up with the full thumbnail displayed in an embedded video.
If you want your video to be displayed as a widget in your main page, here is another step:
1. Go to your Blogger dashboard and click 'Layout'.
2. Click 'Add a Gadget' in any part where you want the video to be shown.
3. Click 'HTML/JavaScript'.
4. Copy your embed code and paste it there.
5. Hit 'Save' and visit your site to see the changes.
So that's how to embed a YouTube video to Blogger Blogspot which you can also apply to WordPress or any platforms that support HTML/JavaScript or iframe player.
Embedding a video from YouTube helps you provide a good user experience to your visitors. Embedded Youtube video also helps in getting it ranked in search results.
Read: 8 Tips to Get Youtube Video Come Up First in Search Results
Read: 8 Tips to Get Youtube Video Come Up First in Search Results
It gives them the convenience of watching your video without leaving your site.
Did this tutorial helped you? Let me know in the comment section below.
Post a Comment