With many organizations adopting social media and digital communication, it kind of becomes obvious to use custom videos on the site. HANA Cloud Portal promises of providing rapid solution to Design, Create, Publish your content on the fly. However, when it comes to presenting HANA Cloud Solution to clients, everyone expects HANA Cloud Portal site to match the user experience with that of modern website developed using HTML5, CSS3, jQuery and so on. One of the most common requirements that come through is using custom image or a thumbnail for video and also provide custom text overlay. Take a look at image below to understand.
As you can see, we want to display an overlaying text block, and play icon at the center. However, the background image is a custom thumbnail and not the one provided by video.
What can we do with HANA Cloud Portal Widgets?
If we want to use standard functionality of widgets, unfortunately, we do not have a lot of choice. There is a video widget that you can use. However, we cannot achieve a custom text block and a custom thumbnail with video widget. When we use video widget, we get following as start up thumbnail.
Way out
I personally feel that HTML widget provided by HANA Cloud Portal is extremely powerful. You can integrate almost any functionality to your HANA Cloud Portal site with HTML widget. For e.g. If you are using a trial version of HANA Cloud Portal, you do not have a search widget. Please note that I am not sure whether search widget is available in full license. However, you can easily develop search component in HTML and add that to your site with HTML widget.
Customizing Video Thumbnail
Now, let us understand how we can replace a standard thumbnail that you see in figure 2 with something like shown in figure 1.
Develop a custom HTML component
We will develop a custom HTML component / page and use CSS to style the HTML so that we can embed the video and get a custom thumbnail. Following is the HTML code.
<html>
<head>
</head>
<body>
<div class="image">
<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
<img class="thumb" style="cursor: pointer;" src="https://cloudportaltrial-p424944trial.hanatrial.ondemand.com/portal/v1/contentRepository/Public/images/Custom_Video.png" alt="" />
<h2><span>Keep Challenging<span class='spacer'></span></h2><br />
<h4><span>
The world is changing faster than ever, creating new opportunities for those who stand ready to seize them.<span></h4>
</div>
<div id="thevideo" style="display: none;">
<iframe width="1200" height="400" src="https://www.youtube.com/embed/vg91t03w5Zw?version=3&hl=en_US&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
Let me take a while to explain the structure of the HTML.
First, we have a DIV named “image”. This is basically a wrapper DIV that wraps a Video and Image together.
Second, we will control the visibility of the video on a user click. This is when we will change the “display:none” property of DIV named “thevideo” with “display:block”. This will basically hide custom thumbnail and instead play a video once user clicks on the image or a play button.
Third, we will define a thumbnail image and assign class “thumb” so that we can control the display properties through CSS. If you are working on HANA Cloud Portal, replace the src URL with your own custom URL to image.
Next, we will define overlay text blocks that we want to show on top of the image. Additional <span> elements are used to align text properly.
Now, we have a DIV named “thevideo” which is initially hidden with the property “display:none”. Here, we will embed video URL in an IFRAME. Note the parameter “autoplay=1”. If you set this parameter to 1, then as soon as use click on a play button or an image, video will start playing. If you do want video to play automatically, set this parameter to 0.
This basically completes the HTML markup for our custom video thumbnail HTML component. Now, let us style this page so that everything is displayed correctly.
The CSS
You can either upload a .CSS file in Documents section of your HANA Cloud Portal OR simply define styles in the HTML markup itself. Define styles within <head> and </head> tags of your html markup.
<style>
.image {
position: relative;
}
.thumb{
width:980px;
height:400px;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h4 {
position: absolute;
top: 250px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: transparent; /* fallback color */
background: transparent;
padding: 10px;
}
h4 span {
color: white;
font: bold 14px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: transparent; /* fallback color */
background: transparent;
padding: 10px;
}
h2 span.spacer {
padding:0 5px;
}
</style>
Here, I want to bring your notice to two points specifically.
First is an image class defined with “.image”. Here, the wrapper or a parent element of the HTML will be positioned relatively so that its child elements can be aligned in line with parent element.
Second, H2 and H4 elements are positioned absolutely. To explain this further, when you position an element relatively, you set it to its normal position. I understand it might be confusing to understand how to position element relatively to itself. However, one main reason to use relative position is it limits child elements positioning. So when a parent element is relatively positioned, you get more control over its child elements and then you can go on to position child elements absolutely which positions the elements relative to its first positioned parent element.
Rest of the part of styling is self-explanatory. Use “.thumb” class to control width and height of your video thumbnail.
Putting together into HANA Cloud Portal
Let us now put this together into our HANA Cloud Portal site. First, we will upload custom image into “Documents” section. To upload an image, go to HANA Cloud Portal > Documents and create a new folder so that you can share content placed in this folder. Upload your custom thumbnail here and use “Share Link” feature to get the link to your custom image. Use this link in HTML markup so that you can get your own image here.
Now, “Edit” the site you want to add this HTML to and add an HTML widget.
Once placed on the design board, simply upload HTML and you are done!
I am sure a lot of people will have this requirement while displaying custom videos publicly. Unfortunately, you cannot use HTML5 video tag here to embed a video and use its “poster” property to assign custom thumbnail. This is because we are embedding a video from streaming site YouTube. If you have a video that is available on your system, do not use this option. Use HTML5 Video tag and use its “Poster” property to set custom thumbnail. However, for other of you who have to embed video from streaming sites, this is the best way to customize video display in line with your organizational branding.
- SAP Managed Tags:
