3 Steps to Embed Google Drive Hosted Video on a Duda Website
The native Duda video widget is a quick and simple way to add a video from YouTube, Vimeo or DailyMotion to your Duda website. However, if you want to add a video hosted in a Google Drive folder, you'll need a different approach. This page describes how to add a video hosted in a Google Drive folder onto your website using an iFrame.
Using the Duda native video widget is simple
The Duda web-hosting platform allows you to easily incorporate videos onto web pages and blog posts using the native video widget. Add a video URL to the widget and, voilá, you've added a nicely formatted video to your page.
Native widget dependencies on third parties
Although simple to use, the video widget has one limitation that you may want to workaround. In particular, the widget only allows videos from YouTube, Vimeo or Daily Motion. In many cases, This constraint is not an issue and could even be considered advantageous.
Questionable desirability of YouTube end-screens
However, YouTube's practice of cueing a follow-on video or an end-screen at the end of the playing video may not be the desired behaviour for an independent website - especially when concerned with the aesthetic of the site. This practice is primarily an issue for videos less than 25 seconds in duration because you are permitted to change the end-screen for videos longer than 25 seconds.
Related Topics
Add Google Drive hosted video to website with an HTML iframe
One alternative to the video widget is to add a responsive iframe using the HTML editor and link it to a video stored in a Google Drive folder. This post explains this alternative.
Three advantages to hosting videos in a Google Drive folder
- Hosting on Google Drive helps maintain visitors' focus upon your site's content compared to YouTube because there is no video-end screen suggesting other content
- For existing GSUITE users, there's no added cost aside from incremental storage.
- Digital media assets can be maintained together on a single platform.
Four disadvantages to hosting videos in a Google Drive folder
- Videos held outside of the YouTube ecosystem don't benefit from YouTube features such as analytics.
- There's limited control of the thumbnail image when the video isn't playing.
- Black bars surround the thumbnail when the video isn't playing.
- Initial page rendering may be slower, which could be sufficient reason to forgo this approach if you're considering placing the video above the fold. Page loading speed is an important signal used by Google to determine page ranking and can negatively impact the visitors' experience.
Three Steps to Embed A Google Drive Hosted Video
Step 1: Add the styling and create a div for responsive iframe
The following code can be copied and pasted into the HTML edit widget for your blog post or web page.
<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
***** Google Drive iframe embed code goes here ******
</div>
Step 2. Copy the iframe embed code for the video from Google drive folder onto your clipboard
The following video walks you through the steps to get the embed code from your Google Drive folder.
Step 3: Paste the Google Drive iframe embed code
Paste the iframe code from Step 2 into your HTML editor from Step 1, replacing the contents of the placeholder (
***** Google Drive iframe embed code goes here ******) with the iframe code. The resulting code should look like this:
<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe frameborder="0" width="640" height="480" src=" https://drive.google.com/file/d/1QgYGZKk5UNFcwbW5lLhD91Kl2Vk5xxL1/preview"
; allowfullscreen="true" allow="autoplay"></iframe>
</div>
If things worked correctly, your embedded video should look something like this:
Conclusion
Environicle
