Thursday, 23 April 2015

Responsive videos in XPages using FitVids.js

When we use YouTube or Vimeo videos the process as described in my previous blog post, Responsive html5video() in XPages, will not work to make the video responsive. The reason is that with videos from YouTube we are dealing with a video that is delivered via an iframe. In this case setting a height is required, otherwise browsers will render the iframe at a static height of 150px. To scale a video to fit any browser, tablet or mobile device for responsive design you can use a Javascript solution or a CSS solution. In this example I will show you how you can use FitVids.js, a javascript solution that injects HTML and CSS to the video code markup in order to make the video responsive.

FitVids.js is a lightweight, easy-to-use jQuery plugin for fluid width video embeds.
In an XPage / Custom Control we can use FitVids.js as follows. As an example, we use a YouTube video. In practice, adding a YouTube video means nothing more than copy and paste the link / URL (iframe) in the relevant XPage / Custom Control.

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

Copying and pasting the link works properly and the video is neatly displayed on the XPage taking into account the specified width and height. But there is one problem, the video is NOT responsive.


To make these (iframe) videos responsive we can use FitVids,js.
First we have to add the jquery.fitvids.js file to the WebContent Folder in the Package Explorer.
For this purpose I created a Folder 'videojs'.


Next we need to include jquery.fitvids.js on the XPage / Custom Control. In this example I include all files on an XPage.

<script type="text/javascript" src="videojs/jquery.fitvids.js"></script>

Further we need to add a ScriptBlock to the XPage to target the videos container with fitVids(). This is a simple script.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
  $(document).ready(
    function() {      
      jQuery(".wrapper").fitVids({ customSelector: ""})
    }
  );
  ]]></xp:this.value>
</xp:scriptBlock>

Finally, the video itself can be added to the XPage.

<div class="col-md-6">
<div class="wrapper">
<iframe width="560" height="315" id="video1"
src="https://www.youtube.com/embed/_XL5tgpZmpk" frameborder="0">
</iframe>
</div>
</div>

If we perform a preview in the browser we now have a responsive video in a simple manner.


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<script type="text/javascript" src="videojs/jquery.fitvids.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
  $(document).ready(
    function() {      
      jQuery(".wrapper").fitVids({ customSelector: ""})
    }
  );
  ]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>Responsive Video <small> iframe Video (YouTube, Vimeo, etc.) </small></h1>
</div>
<div class="col-md-6">
<div class="wrapper">
<iframe width="560" height="315" id="video1"
src="https://www.youtube.com/embed/_XL5tgpZmpk" frameborder="0">
</iframe>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

You can download FitVids.js from GitHub : FitVids.js
In the next blog post I will give an example how to use a Stylesheet (CSS) in order to make a video responsive.

No comments:

Post a Comment