Example of a Video Gallery Widget for Duda Sites
Share
The Need For a Video Gallery
According to Google, 2+ billion users watch more than 1 billion hours of YouTube videos every day. The opportunity for web marketers is to leverage YouTube video's ubiquity to achieve a brand's objectives.
In some cases, leveraging video entails attracting users to a youTube channel or using it in social media. In other cases, we want to embed videos on a website to help prospective customers to know, like, trust, try and buy our brands.
Adding single videos to a Duda website is simple using the native Duda widget. You can also add individual videos using an iframe in an HTML widget described here. However, there's no simple way to add a collection of videos to a Duda webpage in a compact, user-friendly form using the platform's native functionality.
This article provides detailed instructions for implementing a compact, user-friendly custom video gallery widget for the Duda platform that enables uses to navigate through and view a series of related videos.
Video Gallery Features
Flexibility
Support countless use cases by adding one or more related or unrelated videos to your gallery.
More Traffic
Improve search performance with SEO-friendly structured data added for each video.
Easy to Build and Use
Follow a few simple steps to add and configure a full-featured video gallery for your website.
Engage Visitors
Maximize engagement and convey your message with videos organized and served in a user-friendly format.
Contents
Using the Widget Structured Data Requirements Hosting Unite Gallery Source Code License STEP 1: Download the Unite Gallery source code STEP 2: Copy Unite Gallery source code to web server STEP 3: Add widget user interface elements STEP 4: Add the widget HTML code STEP 5: Add the widget CSS code STEP 6: Add the widget JAVASCRIPT code STEP 7: Save and publish the widget We'll Implement it For You
Important Note: If you use other custom widgets with CSS code on the same web-page as the Video Gallery Widget, download, copy and paste the code to include the stylesheets in the page's header HTML as shown below.
If you host the Unite Gallery code
on your web-server, replace the path to the stylesheets as described in Step 5.1.
Structured Data
The Video Gallery Widget adds a schema videoObject like the example below for each video in the gallery.
Requirements
You must have a Duda plan that permits access to the Widget Builder to add the Video Gallery widget to your account.
If you have no prior experience creating Duda widgets, you can learn the basics here.
Hosting Unite Gallery Source Code
The Video Gallery widget is built using Unite Gallery
open-source code. The Unite Gallery sources must be hosted on an accessible web server.
If you do not have your own web server to host the sources, you may reference existing sources on the Protellus-provided web server:
https://stockolio.org/scripts/protellus/unitegallery/dist Step 2
Copy the Unite Gallery sources to your web server
Note: If you use the Unite Gallery sources hosted on the web server provided by Protellus you may omit this step.
Unzip the
unitegallery-master.zip
file downloaded in the previous step.Use cPanel, or your hosting platform's file manager, to copy the
unitegallery-master/dist
sub-directory tree to your host system. 
Make note of the path to the
dist
sub-directory. You will need this path in steps 5.1
and 6.1, and 6.2. For example: https://stockolio.org/scripts/protellus/unitegallery/distConfirm the Unite Gallery files were posted correctly and accessible from your web server by entering the path to the ./
themes/grid/ug-theme-grid.js
source file into a web browser address bar and display it's content.
Step 3
Using the Duda Widget CONTENT EDITOR, add user interface elements.
Variable names and values are case sensitive. Take care to match the element variable names and values exactly.
uniqueId
thumbNail
autoPlay
onePublisher
onePublisherName
onePublisherLogo
onePublisherLogoWidth
onePublisherLogoHeight
videoList
videoId
videoTitle
videoDescription
minutes and seconds
uploadDate
thumbnailImage
publisherName
publisherLogo
publisherLogoWidth
publisherLogoHeight
itemName
Step 3.1
uniqueId is the element ID of the HTML div that will contain the Video Gallery Widget When using the Video Gallery Widget, ensure the entered value is unique for each instance of the widget on the page.
Step 3.2
thumbsNail specifies the configuration of the tumbnail display panel.
Step 3.3
autoPlay specifies whether the video is played without user action when the page is loaded. off - video is not automatically played
on - the first video is automatically played when the page is first loaded.
Step 3.4
onePublisher specifies whether all of the videos included in the gallery are from the same publisher. Use for creating schema data.
Step 3.5
onePublisherName specifies the name of the publisher of all videos in the gallery. This field is used only when
onePublisher
is true
.
Step 3.6
Add the
onePublisherLogo image.
Step 3.7
Add the
onePublisherLogoWidth slider.
Step 3.8
Add the
onePublisherLogoHeight slider.
Step 3.9
videoList is the list of videos to be added to the galleryThe
Link items label to an input
parameter is assigned after the itemName element is created in step 3.9.9.
Step 3.9.1
Add the
videoId text widget. 
Step 3.9.2
Add the
videoTitle text widget. 
Step 3.9.3
Add the
videoDescription text widget. 
Step 3.9.4
Add the minutes and
seconds
text widgets. 
Step 3.9.5
Add the
uploadDate date widget. 
Step 3.9.6
Add the
thumbnailImage image widget. 
Step 3.9.7
Add the
publisherName text widget and publisherLogo
image widget. 
Step 3.9.8
Add the
publisherLogoWidth and publisherLogoHeight
slider widgets. 
Step 3.9.9
Add the
itemName
text widget.
Step 4
Download the Slider HTML code and copy it to the html tab of the Duda Widget Builder.
Step 5
Download the Gallery Widget CSS code and copy it to the css tab of the Duda Widget Builder.
Step 5.1
Change the
@import
instructions to reflect the path to the dist
sub-directory on your web server.Note: If you use the Unite Gallery sources hosted on the web server provided by Protellus you may omit this step.
Step 6
Download the Video Gallery javascript code and copy it to the javascript tab of the Duda Widget Builder.
Step 6.1
Change the
gridTheme assignment to reflect the path to the dist
sub-directory on your web server.Note: If you use the Unite Gallery sources hosted on the web server provided by Protellus you may omit this step.
Step 6.2
Change the
uniteGalleryScript assignment to reflect the path to the dist
sub-directory on your web server.Note: If you use the Unite Gallery sources hosted on the web server provided by Protellus you may omit this step.
Step 7
Save and Publish the Widget
Download the Video Gallery widget icon provided here and then upload the .SVG file to the Duda Widget builder.
Save the changes and publish the widget.
Save the changes and publish the widget.
Need Help Implementing the Video Gallery Widget?
We'll make it super easy or you.
Fill out the order form below and we'll implement the widget on your site for $100 USD.
