Table of Contents:
Introduction
This post is based on content in the posts by Chris Coyier and Nikhil Azza.
By reference to the sources, we can roughly divide the video embedding technique into two categories:
- video sourcing from cloud storage, like google photo
- video sourcing from Youtube
Video From Cloud
How to find google photo link
It’s not a question if you store and source your video file from a downloadable link. However, many people choose to store it on google photo, and if you use google photo share link, you cannot embed the video into your webpage correctly!
Nikhil Azza introduced three ways to get the correct downloadlable link to a video file stored on google photo. I found the first one is simplest and tried it bymyself:
- go to google photo and find the video file you want to embed
- click on download button (caution: not the share button!)
- you can wait until it’s downloaed, or cancel downloading immediately, it doesn’t matter, because what we need is the downloading link. Now, on google chrome, open the download page, the first item on top of the list is the video you want.
- copy the video’s download address, this is the link we can use to embed into our webpage.
How to style the video
It is straight-forward to embed video into a webpage, the syntax we’re using is video:
<video width="800" height="600" controls>
<source src="downloadlink.com" type="video/mp4" />
</video>
The above code comes with a problem: it’s not fluid. In another word, it’s not responsive to the viewport a useer may use to watch the video. For example, if the user is watching the video on a smart phone, the 800px width setting would make the vidwo overflow the screeen.
In a modern web brower that supports HTML5, the solution is astoundingly simple:
video {
width: 100%;
height: auto;
}
Google drive as a backup
Goolge keeps change its app features! It turned out that the link generated from the above is no longer downloadable after a short period of time, which is very annoying!
An alternative is recourse to the 3rd method in Nikhil Azza’s post. Instead of google photo, we have to upload all videos to google drive, and there you can find buttons to generate embeded link for your videos in google drive.
However, the link generated that way is not a static file anymore, but more like those from youtube. The syntax used here is <iframe>, so the styling issue comes just as that when you try to embed youtube videos!
Okay, not a good solution
After a couple of trial and error tests, I found both google photo and google drive solutions come with this or that compatibility issues. Finally, I have to fall back to youtube, which is the most hassle-free one stop solution!
One comment however, sometimes you don’t want the videos to be open to all people. How to do? Well, just upload them to your youtube channel, but set the attribute to “unlisted”, so nobody can see your unlisted videos except when you embed them into your webpages!
Video from Youtube
Apparently, we also need the video sourced from youtube to be responsive, following the logic from above, you may think it should be like,
<iframe
width="100%"
height="auto"
src="youtube-videolink"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
But, if we go with above solution, we will end up at a video window with a fixed height of 150px.
Following is the little trick we need to solve this issue.
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe src="youtube-videolink" frameborder="0" allowfullscreen></iframe>
</div>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The key to this solution is the padding-bottom of the videoWrapper. 56.25% means the content bottom of videoWrapper is 56.25% of the width from the bottom border of the videoWrapper element, which makes the bottom padding area exactly a 16:9 ratio. Similary, if we set the ratio at 50%, the padding area is a 2:1 rectangle.
Other 4 attributes help to realize the final effect:
- relative-absolute position of the wrapper and video elements
- top left 0 setting to make the video align with the wrapper
- videoWrapper itself doesn’t need to take any space, so the height is set at 0
- the videoWrapper is now at the bottom padding area, so set its width and height both at 100% to fill the whole area
Youtube example:
Time Laspe of the Harbour View
