Home
Blogger

How To Make YouTube Videos Responsive In Your Blog Posts?

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.
We are in the new era of the digital world; everything is improving day by day. Formerly we used to use only desktop PC for surfing website but after the rapid use of smartphones, we are now bound to use responsive web design. 

Responsive web design helps to adopt any size on any type of device. 


These is really cool techniques. But if your template or web design is responsive then every element or widgets won’t be responsive. 

In this case, we should take extra steps to make it responsive.

 For example YouTube videos, this is not always responsible 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 device. I have used a simple CSS code to make YouTube video responsive.


How To Make Youtube Videos Responsive In Your Blog Posts?


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 a 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 an HTML script to display the video in Blogger Blog posts. Please follow the below steps-

Step 1 Go to your Blogger Dashboard and Click the New post button to create 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 embeds 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 queries regarding this article please feel free to leave a comment below. 

 Thank you. 

15 comments

  1. 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.
  2. 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
  3. I added the HTML in the blog template and also added the youtube HTML code from your blog and then replaced the youtube link with my video. But it is only responsive for my laptop web browser (chrome).
    In mobile chrome, responsive code acts on the first video making it fit correctly to the screen width but the remaining 2 videos would remain small without any responsiveness.
    Please help.
    My page link is http://sciencewagon.blogspot.com/
    • Hi Kuntal Goswami,
      Thanks for commenting on BloggerSpice. I just visited your site to solve the issue. I have seen that you are using a non-responsive Blogger template. And this is quite impossible to perform a responsive widget script proper way on a non-responsive template.

      So please use any responsive Blogger template and follow the above script. I hope it will work 100%. If any issue arise then Let me know?

      Thank you. :up
  4. Your blog has given me that thing which I never expect to get from all over the websites. Nice post guys!
    • Thanks buddy for your nice feedback. :)
  5. Hey, thanks for this, saved me writing the CSS. It works nicely!
    I'm using it a new site:
    http://girlsandhair.uv99.net
    • Welcome Cosmic :up
      Nice to hear that.
  6. Wonderful article! That is the kind of information that are supposed to be shared around the internet. Disgrace on the search engines for now not positioning this submit upper! Come on over and consult with my site . Thanks =) all of craigslist
    • Hi Werner Ebner :(
      I have delayed to published this tutorial, so this article didn't got top position in search engine result page.
  7. Wow bro you just make my day wonderful thanks...
    • I am very glade to hear that. Thank you :)
  8. The improving of the quality of web design has been relevant for a work in this direction. The creating a hangout presupposes the existence of appropriate templates.
Go Up