Embedded Videos in HTML5

Posted on
6,078 Points
Last Modified:
Experience Level: Beginner
In this tutorial viewers will learn how to embed videos in a webpage using HTML5.

Video Steps

1. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>"

2. Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to the src in the <img> tag.

3. Close the tag by typing </video>

4. You can define the height and width of the displayed video by typing "height=" and "width="

5. To display an image while the video is loading, use the poster property by typing poster="" with the URL of your image within the quotations

6. To loop the video on the page, type "loop" after the source and before closing the tag

7. To add controls so visitors can pause and adjust volume, type "controls" after the source and before closing the tag

8. To have the video's sound automatically set to mute, type "muted" after the source and before closing the tag

9. To have the video autoplay as soon as the page loads, type "autoplay" after the source and before closing the tag. If you choose to autoplay your video, it's helpful to also include controls so the visitor can choose to end the video and to set it as muted

10. To display a backup image in case a visitor's browser doesn't support HTML5, insert an <img> tag with your image between the <video> tag and the </video> tag


Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Join & Write a Comment

Suggested Videos

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month