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!

2 comments:

  1. Some nice examples on Bootsnipp for "responsive videos" e.g. : http://bootsnipp.com/snippets/featured/video-list-thumbnails

    ReplyDelete
    Replies
    1. Thanks for the link. There are of course more solutions for responsive videos in XPages than described in my three blog posts. I use these solutions the most myself. Personally, I prefer FitVids.js and html5video().

      Delete