Monday, 27 April 2015

Responsive videos in XPages using a Stylesheet

In my last two blog posts I demonstrated in what way html5video () (Responsive html5video() in XPages) and FitVids.js (Responsive videos in XPages using FitVids.js) could be used in order to make own videos and iframe videos responsive in XPages applications. In this blog post I show a third possibility, namely the use of a simple Stylesheet (CSS). What we actually do is 'wrapping' the video in another element that gives us fluid width with a reasonable height. It is not a new solution, but it is a commonly used solution in responsive design.

Below the Stylesheet that I use in my XPages applications.

.video-container {
position:relative;
padding-bottom:56.25%; /* 16:9 */
padding-top:30px;
height:0;
overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

The first CSS declarations target the video container and the second target what is in the container, in this case it's the YouTube Video (iframe), You can also apply this to objects and embed elements. The most important element (line) is the padding-bottom rule of 56.25%, this figure is reached by using the video's aspect ratio of 16*9, so 9 divided by 16 = 0.5625 or 56.25%.

The Stylesheet needs to be added to the XPages / Custom Control.

<xp:this.resources>
<xp:styleSheet href="/videocontainer.css"></xp:styleSheet>
</xp:this.resources>

The last step is to add the video itself whereby we use the video container declaration from the Stylesheet.

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

That's all we need to do. Very simple.
If we perform a preview in the browser we see that the video is responsive.


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">
<xp:this.resources>
<xp:styleSheet href="/videocontainer.css"></xp:styleSheet>
</xp:this.resources>
<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="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/_XL5tgpZmpk" frameborder="0" ></iframe>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

The three examples I have given in order to make videos responsive in XPages Applications I will add to the demo database and make it available soon. This brings an end to this short series, but more is on the way!

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.

Monday, 20 April 2015

Responsive html5video() in XPages

A few days ago I was asked how html5video() could be used in XPages, in combination with Bootstrap, and how this could be made responsive. This involved 'homemade' videos which were not published on youtube or other media. In this article I give a basic example of how a 'homemade' video can be added to an XPages application using html5video () and how to make it responsive. This example does not work for videos from Youtube or Vimeo seen these are delivered via iframes. More about that in the next blog post.

html5video() is a jQuery plugin to easily control & customize your HTML5 video player.
The HTML markup structure is pretty simple.

<video width="370" height="214" id="video1">
   <source src="video/namevideo.ogv" type="video/ogg">
   <source src="video/namevideo.webm" type="video/webm">
   <source src="video/namevideo.mp4" type="video/mp4">
   Your browser does not support the video tag.
</video>

The following settings are available.

Property
Default
Description
controls false show / hide video controls
autoplay false Sets video should start playing as soon as it is loaded
playSelector null jQuery selector trigger playing video
pauseSelector null jQuery selector trigger pausing video
stopSelector null jQuery selector trigger stoping video
fullSelector null jQuery selector trigger full screen mode
timerSelector null jQuery selector current time container
durationSelector null jQuery selector video duration container
barSelector null jQuery selector progress bar container
volume 0.5 set volume

In XPages we can use html5video() in the following manner.
First we have to add the jquery.html5video.js file to the WebContent Folder in the Package Explorer.
For this purpose I created a new Folder 'videojs'.


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

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

Further we need the great XSnippet by Mark Roden, x$ jQuery selector for XPages and include it on the XPage. You can add the XSnippet to the Script Libraries.


<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>

The script itself can be made up as follows. The script can be built up to your own preferences using the settings shown above. The name of the id in the script must correspond with the name which is included later on in the video tag.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
  $(document).ready(
    function() {
      x$( "#{id:video1}" ).html5video({
    controls : true,
    autoplay : false
    });
    }
  );
  ]]></xp:this.value>
</xp:scriptBlock>

Next we can build up the video tag. In this example I added the video itself in the WebContent Folder in the Package Explorer.


<video width="570" id="video1">
<source src="video/Circle II Circle Almelo Naxtstage 2014.mp4" type="video/mp4"></source>
Your browser does not support the video tag.
</video>

Remark: In this case we are using standard HTML5 video that will make the video fit the width of a container (column). It's important to remove the height declaration so that the aspect ratio of the video is maintained as it grows and shrinks. This can easily be done by a stylesheet (css).
The simple css file should be structured as follows.

video {
  width: 100%  !important;
  height: auto   !important;
}

The stylesheet must also be added to the XPage.

<xp:styleSheet href="/videoresponsive.css"></xp:styleSheet>

The result is a responsive video.


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">
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
<xp:styleSheet href="/videoresponsive.css"></xp:styleSheet>
</xp:this.resources>
<script type="text/javascript" src="videojs/jquery.html5video.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
  $(document).ready(
    function() {
      x$( "#{id:video1}" ).html5video({
    controls : true,  
    autoplay : false
    });
    }
  );
  ]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>html5video() <small> jQuery Plugin for Controlling and Customizing HTML5 Video/Audio</small></h1>
</div>
<div class="col-md-6">
<h3>Circle II Circle Almelo 2014</h3>
<video width="570" id="video1">
<source src="video/Circle II Circle Almelo Naxtstage 2014.mp4"
type="video/mp4">
</source>
Your browser does not support the video tag.
</video>
</div>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

More info about the jQuery plugin can be found on this website : html5video()