Responsive Videos In Posts on Blogger

0
10
YouTube. Dailymotion, Vimeo.. who doesn’t similar to pass fourth dimension on these sites. Chances are you lot embed videos from these platforms on your blog, but the worst thing? It doesn’t check on mobile devices, that every bit good fifty-fifty if you lot are using a responsive template.

Why is it of import to brand certain videos fits properly on mobile devices? If you lot would accept asked this interrogation virtually fifty-fifty merely one-half a decade dorsum nosotros would said that it is non important, though times are changing a lot faster, bulk of your readers perhaps on to a greater extent than or less variety of mobile devices together with that is why responsive spider web is such a large break-through inward the meshing World. 
Question arises: How practice I brand certain videos on my blog, from either YouTube, Vimeo, Dailymotion (.. or other sources) properly check on my spider web log page when viewed from a mobile device.
Before nosotros start out the tutorial, nosotros would similar you lot to empathise that this tutorial is meant for those blogs which uses a responsive spider web pattern approach, to a greater extent than oftentimes than non the default blogger templates aren’t those, together with next this tutorial would choose goose egg good, it would non bite, but wouldn’t choose you lot whatsoever skillful either.
Tutorial Begins
FitVidsJS is a lightweight jQuery plugin that plant real good inward making videos fluid i.e check alongside the width of the container, from many pop platforms (..and also other platforms that you lot tin specify).

Demo – Fluid Videos
Demo it didn’t happen.

While you lot are on the present page, campaign reducing the size of your browser window together with run across how the video responds to the re-size final result together with adapts itself accordingly.

Back it up: Before you lot start out alongside the steps, I recommend you lot to backup your blogger template every bit nosotros volition brand changes to the template, together with if anything goes incorrect you lot tin ever revert dorsum using the backed-up template file.

Adding jQuery

It is a JavaScript framework that is used for diverse tasks similar DOM manipulation, AJAX together with other technical stuffs that helps overstep far easier to brand a website interactive alongside JavaScript. The FitVids plugin is a jQuery plugin which way it would non piece of work if you lot practice non charge jQuery.

Check if you lot already accept jQuery added Chances are that your template may already incorporate a version of jQuery (many do), it is non recommended to add together jQuery twice, thence cheque if you lot accept jQuery already installed. How to practice that :-

Go to the Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F or +F together with search for the keyword ‘jquery’, overstep through the constitute instances together with run across if you lot accept something similar to this:

<script type="text/javascript" src="https://....../jquery.min.js"></script>

If you lot practice non accept jQuery, add together it – To add together jQuery from Google’s CDN, follow these steps:

  1. Go to your Blogger Dashboard -> Template -> Edit HTML
  2. Use CTRL+For+F search for </head>
  3. Copy the next occupation of code, which is the script tag to include jQuery library inward your spider web log –
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

    That’s it. Now it must await something similar this inward the template code editor

    Adding jQuery’s code snippet inward Blogger template.
  4. Press the orangish “Save Template” push clit to relieve it. 

Once it is done you lot may proceed to the adjacent department to add together the FitVids plgun. Adding it is almost similar to adding jQuery. Keep the template editor open, nosotros demand it for the adjacent 2 steps too!

The principal FitVidsJS plugin

It’s fourth dimension to add together the JavaScript/jQuery plugin. We volition add together it from a CDN, that makes certain that the files charge fast together with doesn’t deport upon on the surgery of your blog.

Before nosotros overstep on further, re-create this script tag which nosotros demand inward the steps mentioned next:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js"></script>
  1. Go to your Blogger Dashboard -> Template -> Edit HTML
  2. Use CTRL+For⌘+F search for </head>
  3. Paste the copied code at nowadays earlier occupation where </head> is.

    It is of import that nosotros seat this script tag afterward the jQuery tag (wherever it is inward the template), thence if you lot already accept jQuery somewhere else inward the template catch putting this tag below it. These tags tin endure added anywhere, inward the head, or fifty-fifty at the cease of the body.

  4. Following is an representative of how it must await similar afterward you lot accept added it to the template. Note that the plugin code i.e Fitvids script tag must ever endure placed afterward jQuery’s for it to work.

Save the template. Yay! We at nowadays accept jQuery & FitVids plugin added inward our template. The concluding component subdivision is initializing the plugin thence that it plant upon the videos inward your posts, together with also other parts if you lot intend to work it for advance purpose.

Initialize the plugin – Fitvids

Once nosotros accept the script tags inward house nosotros accept to say it to initialize the component subdivision on the videos, the plugin can’t approximate where practice you lot accept your videos, or which videos practice you lot intend to brand responsive thence nosotros accept to specify it.

We volition supply dissimilar initialization code for dissimilar applications i.e if you lot desire the plugin to piece of work on all videos on your posts, or if you lot desire it to piece of work on to a greater extent than or less some that you lot tin specify. It gives you lot to a greater extent than command over what you lot desire to endure handled yesteryear this plugin.

Choose the correct initialize code together with proceed alongside the pace to add together it to your template (which is same every bit adding the script tags inward the to a higher house steps, you lot merely accept to seat the next codes below whatsoever script tags nosotros added)

1. All videos inward posts, or (recommended)

The code uses the shape of the trunk of the post service to position which component subdivision of the page it must handle, to a greater extent than oftentimes than non blogger templates include the shape yell “post-body” inward the container of the post service together with assuming that your template does the same you lot tin work this to initialize the plugin on all the videos inward every posts.

<script type="text/javascript">   $(document).ready(function(){     $(".post-body").fitVids();   }); </script> 

On the occupation iii you lot tin alter .post-body to the shape yell you lot desire to target. Most blogger templates this shape quest posts, thence this code may piece of work correct out of the box without whatsoever changes.

2. Only to a greater extent than or less videos, or

If you lot practice non desire every video inward your post service endure handled, together with thence you lot tin specify the ones you lot desire to. 

<script type="text/javascript">   $(document).ready(function(){     $(".fit").fitVids();   }); </script> 

This version of the code plant alone on the videos wrapped within a container alongside the shape fit. It gives you lot a command over the videos you lot desire to brand responsive. As it has been said it needs to endure wrapped within a container, it way that your embed code must endure seat within an chemical constituent similar this:

<div class="fit">     <iframe src="..." width="xxx" height="xxx"> </div>

So spell you lot are including a video somewhere inward your post service you lot ever accept to brand certain you lot wrap it within this code.

3. All, but non some

The 3rd alternative is to accept selective videos non existence handled yesteryear the plugin, all videos volition instruct responsive i the posts except for the ones you lot specify.

<script type="text/javascript">   $(document).ready(function(){     $(".post-body").fitVids({ ignore: '.not-fit'});   }); </script> 

When you lot practice non desire a video to endure handled yesteryear the plugin, you lot tin merely wrap its code within a div chemical constituent alongside the shape not-fit (notice the .not-fit inward the code above). This is how you lot tin wrap the embed code for the video within the element, together with and thence glue it inward your post:

<div class="not-fit">     <iframe src="..." width="xxx" height="xxx"> </div>

And together with thence seat together with code inward place,

Choose an initialization script from whatsoever of the to a higher house sections together with and thence include it inward your Blogger template. To practice that:

  1. Go to Blogger Dashboard -> Template
  2. Edit HTML
  3. Now search for the occupation where nosotros added the FitVidsJS <script…></script> tag. Paste the initialization code merely afterward it. Here’s a screenshot of how it must await 1 time you lot accept it inward place.

Make certain the scripts are inward this order: jQuery -> FitVids -> Initialization Code

If it looks fine relieve the template together with campaign it on a post.

Questions or comments?

It is quite possible that this may non piece of work properly for every spider web log due to dissimilar reasons, fifty-fifty if 1 component subdivision of the take away is non followed properly the chances are high that errors may come upwards up during the set-up, thence if you lot accept whatsoever questions regarding this you lot tin post service a comment on this post service (include your spider web log address) together with nosotros volition campaign to assist you lot laid it up.

If you lot accept suggestions together with comments on this tutorial delight post service it inward the comment form, nosotros would dear to take away heed from you! This post service may non embrace every aspect of the jQuery library, or the FitVids plugin, every bit it would accept made the post service enormously large, to assist others whatsoever flake of data that you lot recollect is vital would endure appreciated.


Sumber http://www.stramaxon.com