HTML5 Video Embed Code-Along

All the files needed to follow along are available in this lab. Just click 'Open IDE' in Learn. However, if you were following along using a personal exceptional-realty repository in the previous HTML lessons, you can continue from where we left off by running the following in your terminal:

git clone https://github.com/<your_username_here>/exceptional-realty
cd exceptional-realty

Following good git practices, since we're going to be adding some new content, type git checkout -b embed-video to start up a new branch for this lesson.

Click here to get the MP4 video linked to in the exercise

Click here to get the OGV video linked to in the exercise

Starting from inside your project folder (wherever your HTML files are stored), let's create a new folder for videos by typing mkdir videos in our terminal. This folder will appear beside your images folder. We'll use two videos during this lesson, and we need to get them into our project before we can incorporate them into the HTML. With the in-browser IDE, we'll need to use our old friend wget. Navigate into the videos folder using cd, then when in there, use wget with the following urls:

• Our MP4 video: http://ironboard-curriculum-content.s3.amazonaws.com/front-end/lab-assets/real-estate.mp4
• Our OGV video: http://ironboard-curriculum-content.s3.amazonaws.com/front-end/lab-assets/real-estate.ogv

Both videos should appear in your videos folder. In order to reach all browser types, we want to include both of these videos in the event that one video type is not supported by a particular browser.

Okay, we've got our content stored locally, so now we need to place it in our webpage. In HTML5, we have a specific element for this, <video>. The <video> element acts slightly differently than other media tags such as <img>. It needs both an opening and closing tag, and instead of listing the source as an attribute, the source of the video is added inside of the opening and closing <video> tags.

Let's go ahead and add these <video> tags to our index.html page, just below our paragraphs of text. Before adding a source, we'll add one attribute to the opening <video> tag, controls. This will indicate to the browser to always show controls for the embedded video.

Next, we'll add the source. Inside the <video tags, add <source>, and then, as attributes, add in src and type. For our src attribute, we'll point it to our .mp4 video using a relative path to the file. We also want to designate the type of this source as "video/mp4". At this point, our code will look like this:

<video controls>
  <source src="videos/real-estate.mp4" type="video/mp4">
</video>

Now we'll add a second source, but change the source to "videos/real-estate.ogv", and the type to "video/ogg".

This secondary source acts as a fallback. Currently, all modern browsers support video/mp4, but as of 2018, roughly 5% of users may still be using a browser that does not, so adding this second line will ensure that every user can watch the video.

Well.. every user can watch the video as long as the browser they are using supports the <video> element itself. Again, there is still a small percentage of users that are using outdated browsers that may not know what to do the HTML5 <video> tags.

For these users, we can also add a message inside the <video> tags. This message display if a user's browser doesn't support the HTML5 video element. The message can simply be "Your browser does not support HTML5 video", but we want to be nice to our users, so we can also go ahead and add a link in this message that opens a new page and navigates to a useful site such as https://browsehappy.com/.

<video controls>
  <source src="videos/real-estate.mp4" type="video/mp4">
  <source src="videos/real-estate.ogv" type="video/ogg">
  Your browser does not support HTML5 video.  <a href="https://browsehappy.com/" target="_blank">Please upgrade your browser</a>
</video>

Now, if we test out our site in multiple browsers, we can see how our source files work. In Chrome and Safari, for instance, the .mp4 version of the video will play. Opera and Firefox, on the other hand, will play the .ogv file. Pretty much all modern browsers support at least one of these file types, so we'd have to dig up an old, out of date browser to see our message and link.

We now have a nice video on our home page! Everything is working and looking good, so let's merge our embed-video branch with master. First, you'll want to add, commit and push the work on our branch.

git add .
git commit -m 'add embedded video to index.html'
git push -u origin embed-video

Then, we will merge our branch into master, add and commit the newly merged content, then push up the work to your repository:

git checkout master
git merge embed-video
git add .
git commit -m 'merged embed-video branch'
git push

View HTML5 Video Embed Code-Along on Learn.co and start learning to code for free.