Blog Post

...

Liferay: Play Video in Popup Window

During Liferay customizations one may need to embed playable videos to portal: to a body of a page or to a popup. There are different posts exist on the internet about how to create a popup in Liferay, but none of them covers this common task – a video within a window. And in this article we’ll see 2 short ways how we can accomplish that.

The first approach implies the application of AlloyUI JS library which is widely used within Liferay 6.2. Actually the entire user interface of Liferay 6.2 is built using this framework, so having this involved we’ll get our custom components to look accordingly to Liferay UI. AlloyUI already has 2 modules that are very helpful to us: aui-video – to create a video player pane, aui-modal – to build a popup window. Both of these modules use predefined div ID to render the final component:

  • the aui-video module – to embed video player into this div (A – is the reference to AlloyUI lib that will be injected a bit later):
    new A.Video(
      {
    	boundingBox: "#videoDiv_someId",
    	fixedAttributes: {
    	  allowfullscreen: 'true'
    	},
    	url: videoUrl  
    	}
    ).render();
    
  • the aui-modal module – to include current div into the popup it creates (A – is the reference to AlloyUI lib that will be injected a bit later):
    new A.Modal( {
        resizable: false,
        centered: true,
        render: "#videoDiv_someId"
      }
    ).render();
    

At this point the video player popup is created, one thing is missing – the videoDiv_someId div wrapper. We can create it by means of JavaScript, not using direct HTML writing. And the final function which has only one string parameter – the url of embedded video, will look as following:

function showVideo(videoUrl) {
    var div = document.getElementById("videoDiv_someId");
    if (!div) {
        var div = document.createElement("div");
        div.setAttribute("id", "videoDiv_someId");
        document.body.appendChild(div);
    }
    YUI().use(
      'aui-video', 'aui-modal',
      function(A) {
        new A.Video({
            boundingBox: "#videoDiv_someId",
            fixedAttributes: {
              allowfullscreen: 'true'
            },
            url: videoUrl  
            }
        ).render();
        new A.Modal({
            bodyContent: 'Modal body',
            resizable: false,
            centered: true,
            render: "#videoDiv_someId"
          }
        ).render(); 
      }
    );
}

Also please note that the references to AlloyUI already included in Liferay so we don’t need to inject this lib directly anywhere.

The second option how we can create the popup video in Liferay is to use a new HTML5 video tag to render video and JQuery to manage the popup. We don’t involve AlloyUI here, so the look of the components will differ a bit from the Liferay’s. To create a modal window let’s invoke dialog function of JQuery UI library:

win liferay

It doesn’t look very cute by default so we need to customize its theme/CSS a little.

The video tag can be created using Javascript as well – in this way there is no need to write any HTML code, all code is one function encapsulated:

function showVideo(videoUrl) {
    var div = document.createElement("div");
    div.setAttribute("id", "videoDiv_someId");
    var video = document.createElement("video");
    video.setAttribute("src", videoUrl);
    video.setAttribute("type", "video/mp4");
    video.setAttribute("controls", "");
    video.setAttribute("width", "680");
    video.setAttribute("height", "440");
    div.appendChild(video);
    document.getElementsByTagName('body')[0].appendChild(div);
    $("#videoDiv_someId").dialog({
        modal : true,
        width : 720,
        hight : 480,
        resizable : false,
        close : function() {
            document.getElementById("videoDiv_someId").remove();
        }
    }
)

Also please note that JQuery library is already included within Liferay, but we shouldn’t forget to link JQuery UI.

Video HTML5 tag allows to render streams from different sources, but for Youtube videos please use iframe tag as show at w3 schools.

Ok we’re about to finish this article. We saw in it 2 options how to create a popup window in Liferay and play a video right on it. I hope you liked it.

Comments (0)

Tags: liferay


0 comments

Leave a Comment