A Simple Step-by-Step Guide to Create a Video Module with Overlay Images in Shopify

Grazitti Interactive, a leading name in development with footprints in multiple locations across the globe, created a functionality in Shopify. In our effort to provide a more personalized experience to our users, we wanted to create a customized appearance functionality for the video section in Shopify. It allows users to upload a video with an overlay image. You can create a personalized appearance that complements the products you offer and establish a strong impression in the eyes of the customer. With the new functionality in place, you will be able to display your videos in an engaging and interesting manner.

(Note: Please take note that our functionality currently supports only YouTube and Vimeo videos)

Let’s take a look at Grazitti Interactive’s video module in Shopify that you can use it on your own eCommerce store.

The video module is used to create a section of your YouTube and/or Vimeo video on the Homepage. There are three different layers of images—background image, overlay image, and thumbnail image.
Developers can add this functionality from the backend process in simple steps, so that the users can upload their content with ease. Also, there are different options to upload background and overlay images from your mobile devices.

When a customer clicks on the play icon, the embedded video will play on the overlay image.

Here is what you need to do in order to implement this functionality in your own seller account:

• Go to ‘Online Store’ in Shopify backend.
• Click on ‘Online store link’
• Click on the ‘Actions’ button and select ‘Edit Code’

To add a new section for your account, follow the steps mentioned below:

• Go to ‘Sections’
• Select ‘Add a new section’
• Click on ‘video-module.liquid’

Copy and paste following code into video-module.liquid

{{ ‘video-module.css’ | asset_url | stylesheet_tag }}

{% if section.settings.desktop_background_image != blank %}
<div class=”video-module-background”>
{% else %}
<div class=”video-module-defaultbg”>
{% endif %}
{% if section.settings.desktop_overlay_image != blank %}
<div class=”video-module-overlay”>
{% else %}
<div class=”video-module-defaultoverlay”>
{% endif %}
{% if section.settings.video_url != blank %}

<div class=”video-module-player” data-section-type=”video”>
<div class=”video-thumbnail”>
<div class=”embed-video”
data-source=”{{ section.settings.video_url.type }}”
data-video-url=”{{section.settings.video_url}}”>
</div>
{% if section.settings.video_thumbnail != blank %}

<img id=”video-thumb-play” src=”{{ section.settings.video_thumbnail | img_url: ‘master’ }}” alt=”video-thumbnail” />
<div class=”video-play-icon”>
</div>
{% else %}
<img id=”video-thumb-play” src=”https://fpoimg.com/700×400?text=thumbnail” alt=”video-thumbnail” />
{% endif %}
</div>

</div>

{% endif %}
</div>
</div>

{% schema %}
{
“name”: “Video Module”,
“settings”: [
{
“id”: “video_url”,
“type”: “video_url”,
“label”: “Video URL for Desktop”,
“accept”: [“youtube”, “vimeo”],
“info”: “Supports Youtube and Vimeo”,
“default”: “https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc”
},
{
“id”: “autoplay”,
“type”: “checkbox”,
“label”: “Autoplay”,
“default”: false
},

{
“type”: “image_picker”,
“id”: “desktop_background_image”,
“label”: “Desktop Background Image”
},
{
“type”: “image_picker”,
“id”: “mobile_background_image”,
“label”: “Mobile Background Image”
},
{
“type”: “image_picker”,
“id”: “desktop_overlay_image”,
“label”: “Desktop Overlay Image”
},
{
“type”: “image_picker”,
“id”: “mobile_overlay_image”,
“label”: “Mobile Overlay Image”
},
{
“type”: “image_picker”,
“id”: “video_thumbnail”,
“label”: “Video Thumbanil”
}
],
“presets”: [
{
“name”: “Video Module”,
“category”: “Video”,
“settings”: {
“video_url”: “https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc”
}
}
]
}
{% endschema %}

/* Use default jquery file, if required */

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
{{ 'embed-video.js' | asset_url | script_tag }}
<script>
var js = jQuery.noConflict();
js(document).ready(function(){
js('.embed-video').embedVideo();
});
</script>

To add new assets, follow the steps mentioned below:

Copy and paste following into video-module.css

.video-module-background{background-size: 100%; background-position: center top; background-repeat: no-repeat;}
#video-thumb-play{position:absolute;top:0;cursor:pointer;}
.video-module-overlay{ background-size: 100% 100%; background-position: center top; background-repeat: no-repeat;}
.video-module-player{width: 50%; margin: auto;padding-top: 10%;padding-bottom: 10%;}
.video-play-icon svg{fill: #0c0101;
width: 50px;
height: 50px;}
.video-play-icon {z-index: 9;cursor: pointer;padding:10px 7px 5px 15px;margin: -2em 0 0 -1.8em;border-radius: 25px;position: absolute;text-align: center;top: 50%;left: 50%;}
.video-thumbnail{position:relative;}
//.video-play-icon:hover{background-color: rgb(0, 173, 239);}
.video-container-module {position: relative;padding-bottom: 56.25%; height: 0; overflow: hidden;max-width: 100%;}
.video-container-module iframe, .video-container-module object, .video-container-module embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (max-width:1250px){
.video-module-background { background-size: cover;}
}
@media (max-width:767px){
.video-module-player { padding-bottom: 50%; padding-top: 32%; width: 90%;}
}
@media (max-width:767px){
#playertwo iframe{width:100%;}
.video-module-overlay { background-size: contain;}
.video-module-background { background-size: 100%;}
}

Copy and paste the following code into embed-video.js

window.kalturaLoaded = false;
(function($) {
$.fn.embedVideo = function(options) {
$(this).each(function() {
var settings = $.extend({
uiconf : '11601208',
wid : '102',
maxWidth : ($(this).data('max-width')) ? $(this).data('max-width') : '1200px',
video_id : $(this).data('video-id'),
video_url : ($(this).data('video-url')) ? $(this).data('video-url') : null,
html5 : false,
autoplay: ($(this).data('autoplay')) ? $(this).data('autoplay') : false,
thumbnail : ($(this).data('thumbnail')) ? $(this).data('thumbnail') : false,
width : ($(this).data('width')) ? $(this).data('width') : '100%',
height : ($(this).data('height')) ? $(this).data('height') : '100%',
container : $(this).attr('id'),
video_src: ($(this).data('source')) ? $(this).data('source') : 'kaltura',
play : ($(this).data('icon')) ? $(this).data('icon') : ''
}, options);

var video_cont = $(this);

if (settings.video_src == 'kaltura') {
if (!window.kalturaLoaded) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://cloudvideo.cdn.net.co/p/' + settings.wid + '/sp/' + settings.wid + '00/embedIframeJs/uiconf_id/' + settings.uiconf + '/partner_id/' + settings.wid;
document.getElementsByTagName('head')[0].appendChild(script);
window.kalturaLoaded = true;
}
} else if (settings.video_src == 'youtube') {
var videoid = settings.video_url.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/);
if(videoid != null) {
settings.video_id = videoid[1];
}
} else if (settings.video_src == 'vimeo') {
settings.video_id = settings.video_url.split(/video\/|https?:\/\/vimeo\.com\//)[1].split(/[?&]/)[0];
}
var video_styles = function() {
video_cont.css({
width : settings.width,
height : settings.height,
position : 'absolute',
top : 0,
left : 0,
'background-repeat' : 'no-repeat',
'background-size' : 'cover',
'background-position' : '50% 50%',
'background-image': 'url("' + settings.thumbnail + '")'
});
}

if (!settings.thumbnail) {
if (settings.video_src == 'kaltura') {
settings.thumbnail = 'http://cloudvideo.cdn.net.co/p/' + settings.wid + '/thumbnail/entry_id/' + settings.video_id;
video_styles();
} else if (settings.video_src == 'youtube') {
settings.thumbnail = 'https://img.youtube.com/vi/' + settings.video_id + '/maxresdefault.jpg';
video_styles();
} else if (settings.video_src == 'vimeo') {
$.getJSON('http://www.vimeo.com/api/v2/video/' + settings.video_id + '.json?callback=?', {format: "json"}, function(data) {
settings.thumbnail = data[0].thumbnail_large;
video_styles();
});
}
} else {
video_styles();
}

var videoContainer = $('
<div>').attr({
'style' : 'width: 100%; margin: 0 auto; max-width: ' + settings.maxWidth + ';',
'class' : 'videoContainer'
});
var frameVideoContainer = $('
<div>').attr({
'style' : 'position: relative; height: 0; width: 100%; padding-bottom: 56.25%;',
'class' : 'framePlayerContainer'
});
var playIcon = $(settings.play);
playIcon.attr({
width : '100%',
height : '100%'
});var playButton = $('.video-play-icon').append(playIcon);
var parent = $(this).parent();
playButton.appendTo($(this));
$(this).wrap(frameVideoContainer);
frameVideoContainer.wrap(videoContainer);
//videoContainer.appendTo(parent);
var videoAutoPlay = (settings.autoplay == 'true') ? 1 : 1;
playButton.click(function() {
playButton.fadeOut(function() {
$(this).remove();
if (settings.video_src == 'kaltura' && window.kalturaLoaded) {
kWidget.embed({
'targetId' : settings.container,
'wid' : '_' + settings.wid,
'uiconf_id' : settings.uiconf,
'entry_id' : settings.video_id,
'flashvars' : {
'autoPlay' : true
}
});
}else if (settings.video_src == 'youtube') {
var video_player = '<iframe width="100%" height="100%" src="https://www.youtube.com/embed/' + settings.video_id + '?autoplay=' + videoAutoPlay + '" frameborder="0" allowfullscreen autoplay></iframe>';
video_cont.append(video_player);
} else if (settings.video_src == 'vimeo') {
var video_player = '<iframe src="https://player.vimeo.com/video/' + settings.video_id + '?autoplay=' + videoAutoPlay + '" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
video_cont.append(video_player);
}
});

js('.video-play-icon').hide();
js('.embed-video').show();
js('.video-thumbnail img').hide();
});

});
}
})(jQuery);

To customize the video module you created, follow the instructions mentioned below:

• Go to ‘Online Store’ in Shopify backend
• Click on ‘Customize’ button of published theme
• Click on the ‘Add Section’ tab
• Select ‘Add Video Module’

To configure the video module setting, follow the steps mentioned below:

• Enter the URL to your video in the “Video URL for Desktop” field
• Upload background images for desktop and mobile
• Upload overlay images for desktop and mobile
• Upload thumbnail image

Note: You can drag and drop this section to your preferred location

Click on ‘Save’ and you are done!

Once you have completed all of the aforementioned steps, you can review the changes made to this section on the Home page.

With this functionality in place, your e-commerce store can easily stand-out from the crowd and create an impact on the sales as well. Developers at Grazitti Interactive have curated and collected multiple scripts to create this functionality so that you don’t need to do the hard work. With this single code, you can easily embed your YouTube and Vimeo videos in a customized format. They can be easily managed through the admin panel and only take a few minutes to include in your website. Take advantage of this functionality today.

Develop a custom functionality for your business today. Get in touch with our experts at [email protected] or visit us at www.grazitti.com.