Adding videos to a web page

Why add video to a web page? Perhaps you want to show a process or a series of events? Or maybe you want to communicate with users in a more lively, engaging way than just using text and static images.

Let’s say you’re a mechanic, who has a website to help people find you. You run a blog on the site showing basic ‘how tos’ and have previously used images to help people interpret their cars’ warning lights. Now, you want to try something more complicated: how your viewers can change their own oil. This is a fairly extensive process and can be confusing for novices, especially if only conveyed using images. Instead, you may wish to use video.

Video presents another way to add a rich, multimedia experience to your web pages. However, until the arrival of the latest version of HTML, HTML5, adding videos to a web page was not easy because web browsers did not have a standard way of defining embedded media files such as video.

With HTML5, the two most common ways to embed videos are by using:

1. the <video> element to point to video files
2. the <iframe> element to embed videos that are hosted on sites such as YouTube.

Using

The <video> element provides a standard way to embed videos into web pages, which works on most browsers and allows you to specify player controls and styles.

Let’s take a closer look at an example:

<video controls="controls" src="media/video/myvideo.mp4"> 
 Your browser does not support the video tag/element. </video>

The ‘controls’ attribute specifies that browser default video controls should be played, including:

• Play
• Pause
• Seeking
• Volume
• Fullscreen toggle
• Captions/subtitles (when present)
• Track (when present).

If the browser cannot display the video for some reason, you can specify some text within the tags to display instead; for example, ‘Your browser does not support the video tag/element.’

You can also style the player using attributes, such as width=100%, which will resize the video to fit the width of the page.

Using <iframe>

An iframe is a useful element in HTML5. An iframe is essentially a window into another web page within your web page. You can use them not only for videos, but also for embedding many kinds of external content in a single web page. You can use iframes as a powerful way to leverage tools and content hosted by other providers without having to build your own. For now, let’s look at how you can include streaming videos from providers like YouTube.

Embedding YouTube videos with iframes

YouTube is a popular video hosting platform. You may choose to upload your video to a platform such as YouTube and embed it from there on your website. Let’s look at the basic steps.

Note that you’ll need to create a YouTube account for this approach. [1] If YouTube isn’t accessible in your country, you can follow the same steps with a different service, such as Vimeo. [2]

1. Upload the video. While logged into your YouTube account, go to the YouTube upload video page and follow the instructions to upload your video.
2. Create the HTML embed code.
   • When you open your uploaded video in YouTube, look for the Share button, which is located just below the video itself.
   • A panel opens that displays some sharing options.
   • In the panel that opens, select the Embed tab.
   • HTML embed code is automatically generated.
   • Copy the embed code.
3. Paste the HTML embed code into your web page into an iframe.

Try an example of the code:

<iframe width = "560" height = "315" src = 
 "https://www.youtube.com/watch?v=s4BibernJxU" frameborder = "0" 
 allowfullscreen > 
</iframe>

Note that you don’t need to specify any controls for video in the iframe. The video interface comes from YouTube along with the video. You can also specify attributes like width and height to control how the video displays.

Over to you

Apart from videos, you can add a range of different content to web pages with iframes. Do some research online to find some other possibilities. For example, is there a way you could include some weather information on your web page using an iframe? What about a search engine?

Try embedding an entire web page of your choice in an iframe. What is the result? Experiment with adjusting the iframe attributes to control how the website-within-a-website looks and behaves.

Share your findings in the comments. Read what your fellow learners have to say.

References

1. Beautiful Free Images & Pictures [Internet]. Unsplash; [date unknown]. Available from: https://unsplash.com/
2. YouTube [Internet]. [date unknown]. Available from: https://www.youtube.com/
3. Vimeo | The world’s only all-in-one video solution [Internet]. [date unknown]. Available from: https://vimeo.com