Here's a simple trick to enable those embedded youtube videos of yours, be more responsive or mobile friendly. What this guide aims to do is make those youtube videos works as it should be in any given platform. As you might know already, if your blog videos aren't customized to be mobile friendly, there are tendencies that in the mobile version of your blog, it is smaller and un-viewable to other users and also, there are times that it may appear very large that it overlapse or overflow the size of the viewing screen.
Why make your embedded youtube videos mobile friendly?
Well, that's really simple. To make it more viewable in mobile of course. Just imagine this you have a youtube video seen on a website that you need to view and your on mobile. However, the youtube videos are too small in size. The option you have is just click it and view it on youtube on other tab.
In the website owners side, that is a lost in viewers and more increase in exit rate which can cause high bounce rate. As a blogger, you don't want that. You are selfish and you just want to make your readers stay on your site as much as possible. So, just by enabling the youtube video to be viewed in correct size, when viewed in mobile or tablet, will surely benefit you as a blogger as the viewer will stay on your website, increasing your time of visit which basically lessen your bounce rate.
So now that you know the importance of doing this, you can check out below on How to Make Your Blog's Embedded Youtube Videos Responsive or Mobile Friendly.
All you need to do is add the CSS code below to your blog.
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden;}.video-container iframe,.video-container object,.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
On blogger, you can add this by going to your Template > Customize > Advanced > and then just paste the code on the box. Once you've pasted it just hit "apply to blog".
Once you added your CSS, you now have to add the code below to each of your youtube videos:
<div class="video-container">
youtube embed code here
</div>
So example:
The normal youtube video has an embed code which looks like this:
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/_IiGcg2ISv8" width="530"></iframe>
Now, what you need to do is make that, look like this:
<div class="video-container">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/_IiGcg2ISv8" width="530"></iframe>
</div>
Simple right?
Once you have applied this, you will then see the right video size even if it's viewed on other platforms aside PC.
Check out the image as reference below:
Before:
After:
Note: this youtube vids were viewed on a Samsung Galasy S5 phone.
For more blogging tips, come and join our facebook community @ facebook.com/webjunkiesblog.
0 Response to "How to Make Your Blog's Embedded Youtube Videos Responsive or Mobile Friendly"
Post a Comment