BloggingBloggerScience-and-TechnologyWordPress

How To Make All Youtube Videos Responsive In Your Website

 
 
 

How do I make an embedded YouTube video responsive in WordPress or Blogger?


When it comes to videos embedding, it’s certainly a very important component that makes up most of the internet traffic worldwide. Yet, some bloggers and publishers have been several questions around the topic. These are questions that publishers have asked so many times in forums or in our inquiries inbox.

  • Can I make all my YouTube videos in my website or blog responsive?
  • How do you embed a YouTube video responsive?
  • How do I resize a YouTube video for my website?
  • How do I make an embedded YouTube video responsive in WordPress or Blogger?
  • How do I make a video mobile responsive?

Why Should You Make All embedded YouTube Videos Responsive?

 
  • All your videos will be resized to the correct screen.
  • Visitors will view the content right from your domain. That way you increase audience retention and decrease the bounce rate of the blog.
  • Gives a professional impression of the site as a whole.
In this post we help you embed responsive YouTube, Vimeo or any other Videos to your blog or website. You will need just to copy and paste some lines of code to make all your blog videos responsive and fit the screen of the visitor’s device screen.

Ways to Add Responsive YouTube Video in Blogger


In order to solve this problem, we share with you a very easy fix to implement within your blog. That’s the proper way to automatically resize your video content to fit all screen sizes whether desktop computers, laptops, or smartphones.


Note: This fix will resize all the current and previous embedded videos to make them responsive automatically. It saves you time and effort on doing it manually like old codes.

How To Install The Script Step 1


First follow these steps:
  1. Login to you Blogger dashboard.
  2. Backup your template first.
  3. Head to Template then Edit HTML.
  4. Search for the desired line of cde
  5. With Ctrl + C to copy and Ctrl + V to paste the code in its appropriate place.
  6. Save your template and exit.

How To Install The Script Step 2


Now search for this line </head> and place the following code just before it:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js”></script><script src=”https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js”type=”text/javascript”></script><script type=”text/javascript”>$(document).ready(function(){$(“.post-body”).fitVids();});</script>
 
🔔 Subscribe to our channel to get exclusive & free tech tips & hacks 🔔
 

Note: If you have already installed the jquery script, then delete it.

How to make YouTube Videos Mobile Responsive In WordPress


As usual with WordPress, the tasks are much easier. In order to embed your YouTube videos while keeping their aspect ratio, just use the two recommended plugins below which are 100% Free. You can insert the video shortcode directly from WordPress post editor using default YouTube Embed Code .


Et voila! Congratulations, now you have successfully made all your YouTube videos in Blogger %100 responsive. You can visit Responsinator website and check all the screen sizes at once.



إشترك في قناتنا على اليوتيوب وتوصل بأحدث الدروس والشروحات أولا بأول

🔔 Subscribe to our channel to get Exclusive & free tech tips & hacks 🔔



👍 Follow Our Facebook page to get latest updates 👍
🤩👇👇👇👇🤩

Wanna Get Free Tech Help?

Don’t miss out on new posts. Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

We promise we’ll never spam! Take a look at our Privacy Policy for more info.

How do I make an embedded YouTube video responsive in WordPress or Blogger
  • Save

You May Also Like - قد يعجبك أيضا

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
error: Alert: Content is protected !!
0 Shares
0 Shares
Share via
Copy link

Ad Blocker Detected :(

Please consider supporting us by disabling your ad blocker.

من فضلك قم بتعطيل أداة مانع الإعلانات أدبلوك من المتصفح للدخول لموقع إنجليعز أو إستخدم متصفح آخر
شكرا لتفهمك وزيارتك