embedded video

Embedded video is the one integrated within the webpage using specific code tags. The video loads once the page is opened. The benefit is obvious, as video can be viewed without accessing 3rd party URLs like youtube, vimeo, or others.

HTML5 allows usage of such specific tags to embed required video. The standard way is via <video> element. All browsers fully support it (including IE). The example code for embedding video is the following:

<video width="320" height="240" controls>
  <source src="video_file.mp4" type="video/mp4">
  <source src="video_file.ogg" type="video/ogg">
  <source src="video_file.webm" type="video/webm">
</video>

The above code defines settings for the video box:

1. Width and height of the video frame (value is determined in px);

2. Video attributes can be used instead of controls (like play, pause, and volume);

3. The sources of the video. Such code allows showing video from one of the site’s folders. You should upload the video file to the server and use path under src=“” line;

4. Video formats: video tag allows usage of 3 video formats – .mp4, .ogg, and .webm. Files of the .mp4 format will be rendered by all browsers. Files of the .ogg and .webm formats can be rendered by Chrome, Firefox, and Opera (they won’t be shown in IE or Safari).

If you’d like to embed video from the 3rd party site (f.e., Youtube), iframe should be used. Find the required video at first, click Share> Embed and copy the iframe generated automatically. That should look similar to below:

Paste the iframe to the required location in the page and save changes.

Now you know how to embed video via HTML.