How to Make YouTube Video Responsive in Blogger Site?

Make Your YouTube Video Mobile Responsive in Blogger Template by using simple CSS Script for adopting any size on any devices.

4
data:blog.title
responsive YouTube video

We are in new era of digital world; everything is improving day by day. Formerly we used to use only desktop PC for surfing website but after rapid use of Smartphone we are now bound to use responsive web design. Responsive web design helps to adopt any size on any types of devices. This is really cool techniques. But if your template or web design is responsive then every elements or widgets won’t be responsive. In this case we should take extra steps to make it responsive. For example YouTube video, this is not always responsive for website. Your template is responsive but you have added YouTube video without responsive code then your website visitors won’t able to watch the video properly. Ultimately your template’s responsiveness won’t work.   

So I am going to share the tutorial to make YouTube video responsive and it will automatically adopt any size on any devices. I have used simple CSS code to make YouTube video responsive.


To make a YouTube video responsive, you can add the following code to your Blogger template’s Primary CSS file or the style sheet being applied to your site. Just follow the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML->

Step 3
 Now find the ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 Copy the script from below and Paste it above/before ]]></b:skin>

.tubevideo {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.tubevideo iframe,
.tubevideo object,
.tubevideo embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Step 7 hit the Save template button from the top.

If you wish to use the above CSS script in specific page then add the CSS code within <style> tag.

<style>
CSS script Here…
</style>

We have added the CSS script and now we will add HTML Script to display the YouTube video with responsive techniques.


YouTube video on Smartphone

How to display YouTube Video in Blogger Blog Post?

In this step we will use a HTML script to display the video in Blogger Blog posts. Please follow the below steps-

Step 1 Go to your Blogger Dashboard and Click New post button to create a new content or edit any post.

Step 2 From Post editor switch to HTML view from Compose view.

Step 3 Now copy the below HTML script and paste it in Post editor while in HTML view.

<div class="tubevideo">
         <iframe width="560" height="315" src="https://www.youtube.com/embed/aom_UhSlhAo" frameborder="0" allowfullscreen></iframe>
</div>


Customization

  • Please replace the http://www.youtube.com/embed/dFVxGRekRSg with your YouTube embed video URL.

Step 4 Finally hit the Publish button.

Now check your Blog post with YouTube video in Smartphone, I hope it will resize according to the device width. If you have any query regarding this article please feel free to leave a comment below. Thank you. 
How to Make YouTube Video Responsive in Blogger Site?
4 Stars stars - "How to Make YouTube Video Responsive in Blogger Site?" We are in new era of digital world; everything is improving day by day. Formerly we used to ...

Post a Comment

vai, jekono page a comment section noshto hoye jay keno? like this- https://1.bp.blogspot.com/-g2vv20nnpXQ/VzHrjQWViGI/AAAAAAAAAdM/7nIRJBAVUcQwn4zoIYWRL5A5KCvzYDFFACLcB/s1600/Screenshot_2.png

Ata Blogger Platform upgrade er por aai problem ta dekha dice. Custom comment section ar sathe script conflict kore. But only Blogger page, post a na. Ami ekbar problem solve korcilam but porerdin abar eki problem show korce.

Vai akta help koren. Blogger blog er text uncopiable korte chai apnar moto. Kivabe korbo ?

Hi Shibam...Please follow the tutorials from Below URLs

http://www.bloggerspice.com/2016/01/how-to-Protect-your-Website-by-Disabling-page-source-view.html

http://www.bloggerspice.com/2013/07/2-ways-stop-thieves-copying-your-blog.html

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *