YouTube. Dailymotion, Vimeo.. who doesn't like to spend time on these sites. Chances are you embed videos from these platforms on your blog, but the worst thing? It doesn't fit on mobile devices, that too even if you are using a responsive template.
This version of the code works only on the videos wrapped inside a container with the class
So while you are including a video somewhere in your post you always have to make sure you wrap it inside this code.
When you do not want a video to be handled by the plugin, you can just wrap its code inside a
If it looks fine save the template and try it on a post.
If you have suggestions and comments on this tutorial please post it in the comment form, we would love to hear from you! This post may not cover every aspect of the jQuery library, or the FitVids plugin, as it would have made the post enormously large, to help others any bit of information that you think is vital would be appreciated.
Why is it important to make sure videos fits properly on mobile devices? If you would have asked this question about even just half a decade back we would said that it is not important, though times are changing a lot faster, majority of your readers maybe on some kind of mobile devices and that is why responsive web is such a big break-through in the internet World.
Question arises: How do I make sure videos on my blog, from either YouTube, Vimeo, Dailymotion (.. or other sources) properly fit on my blog page when viewed from a mobile device.
Before we begin the tutorial, we would like you to understand that this tutorial is meant for those blogs which uses a responsive web design approach, mostly the default blogger templates aren't those, and following this tutorial would bring nothing good, it would not bite, but wouldn't bring you any good either.
Tutorial Begins
FitVidsJS is a lightweight jQuery plugin that works very well in making videos fluid i.e fit with the width of the container, from many popular platforms (..and also other platforms that you can specify).
Back it up: Before you begin with the steps, I recommend you to backup your blogger template as we will make changes to the template, and if anything goes wrong you can always revert back using the backed-up template file.
Demo - Fluid Videos
Demo it didn't happen.
While you are on the demo page, try reducing the size of your browser window and see how the video responds to the re-size event and adapts itself accordingly.Demo it didn't happen.
Back it up: Before you begin with the steps, I recommend you to backup your blogger template as we will make changes to the template, and if anything goes wrong you can always revert back using the backed-up template file.
Adding jQuery
It is a JavaScript framework that is used for various tasks like DOM manipulation, AJAX and other technical stuffs that helps make it easier to make a website interactive with JavaScript. The FitVids plugin is a jQuery plugin which means it would not work if you do not load jQuery.
Check if you already have jQuery added Chances are that your template may already contain a version of jQuery (many do), it is not recommended to add jQuery twice, so check if you have jQuery already installed. How to do that :-
Go to the Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F or ⌘+F and search for the keyword 'jquery', go through the found instances and see if you have something similar to this:
If you do not have jQuery, add it - To add jQuery from Google's CDN, follow these steps:
Before we go on further, copy this script tag which we need in the steps mentioned next:
We will provide different initialization code for different applications i.e if you want the plugin to work on all videos on your posts, or if you want it to work on some some that you can specify. It gives you more control over what you want to be handled by this plugin.
Choose the right initialize code and continue with the step to add it to your template (which is same as adding the script tags in the above steps, you just have to put the following codes below any script tags we added)
On the line 3 you can change
Check if you already have jQuery added Chances are that your template may already contain a version of jQuery (many do), it is not recommended to add jQuery twice, so check if you have jQuery already installed. How to do that :-
Go to the Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F or ⌘+F and search for the keyword 'jquery', go through the found instances and see if you have something similar to this:
<script type="text/javascript" src="https://....../jquery.min.js"></script>
If you do not have jQuery, add it - To add jQuery from Google's CDN, follow these steps:
- Go to your Blogger Dashboard -> Template -> Edit HTML
- Use CTRL+For⌘+F search for
</head> - Copy the following line of code, which is the script tag to include jQuery library in your blog -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
That's it. Now it must look something like this in the template code editor
Adding jQuery's code snippet in Blogger template. - Press the orange "Save Template" button to save it.
The main FitVidsJS plugin
It's time to add the JavaScript/jQuery plugin. We will add it from a CDN, that makes sure that the files load fast and doesn't impact on the performance of your blog.Before we go on further, copy this script tag which we need in the steps mentioned next:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js"></script>
- Go to your Blogger Dashboard -> Template -> Edit HTML
- Use CTRL+For⌘+F search for
</head> - Paste the copied code immediately before line where
</head>is.
It is important that we put this script tag after the jQuery tag (wherever it is in the template), so if you already have jQuery somewhere else in the template consider putting this tag below it. These tags can be added anywhere, in the head, or even at the end of the body. - Following is an example of how it must look like after you have added it to the template. Note that the plugin code i.e Fitvids script tag must always be placed after jQuery's for it to work.
Initialize the plugin - Fitvids
Once we have the script tags in place we have to tell it to initialize the function on the videos, the plugin can't guess where do you have your videos, or which videos do you intend to make responsive so we have to specify it.We will provide different initialization code for different applications i.e if you want the plugin to work on all videos on your posts, or if you want it to work on some some that you can specify. It gives you more control over what you want to be handled by this plugin.
Choose the right initialize code and continue with the step to add it to your template (which is same as adding the script tags in the above steps, you just have to put the following codes below any script tags we added)
1. All videos in posts, or (recommended)
The code uses the class of the body of the post to identify which part of the page it must handle, mostly blogger templates include the class name "post-body" in the container of the post and assuming that your template does the same you can use this to initialize the plugin on all the videos in every posts.<script type="text/javascript">
$(document).ready(function(){
$(".post-body").fitVids();
});
</script>
On the line 3 you can change
.post-body to the class name you want to target. Most blogger templates this class name for posts, so this code may work right out of the box without any changes.2. Only some videos, or
If you do not want every video in your post be handled, then you can specify the ones you want to.<script type="text/javascript">
$(document).ready(function(){
$(".fit").fitVids();
});
</script>
This version of the code works only on the videos wrapped inside a container with the class
fit. It gives you a control over the videos you want to make responsive. As it has been said it needs to be wrapped inside a container, it means that your embed code must be put inside an element like this:<div class="fit">
<iframe src="...[embed code]" width="xxx" height="xxx">
</div>
So while you are including a video somewhere in your post you always have to make sure you wrap it inside this code.
3. All, but not some
The third option is to have selective videos not being handled by the plugin, all videos will become responsive i the posts except for the ones you specify.<script type="text/javascript">
$(document).ready(function(){
$(".post-body").fitVids({ ignore: '.not-fit'});
});
</script>
When you do not want a video to be handled by the plugin, you can just wrap its code inside a
div element with the class not-fit (notice the .not-fit in the code above). This is how you can wrap the embed code for the video inside the element, and then paste it in your post:<div class="not-fit">
<iframe src="...[embed code]" width="xxx" height="xxx">
</div>
And then put and code in place,
Choose an initialization script from any of the above sections and then include it in your Blogger template. To do that:- Go to Blogger Dashboard -> Template
- Edit HTML
- Now search for the line where we added the FitVidsJS <script...></script> tag. Paste the initialization code just after it. Here's a screenshot of how it must look once you have it in place.
If it looks fine save the template and try it on a post.
Questions or comments?
It is quite possible that this may not work properly for every blog due to different reasons, even if one part of the guide is not followed properly the chances are high that errors may come up during the set-up, so if you have any questions regarding this you can post a comment on this post (include your blog address) and we will try to help you set it up.If you have suggestions and comments on this tutorial please post it in the comment form, we would love to hear from you! This post may not cover every aspect of the jQuery library, or the FitVids plugin, as it would have made the post enormously large, to help others any bit of information that you think is vital would be appreciated.
