Videos & Youtube iFrames | HTML | Tutorial 10

Summary

This tutorial demonstrates how to embed videos into a webpage using HTML, covering both locally stored videos and YouTube videos. It explains the `video` tag for local files, including attributes for playback controls, sizing, poster images, autoplay, and looping. The tutorial also details how to embed YouTube videos using iframes, leveraging YouTube's share and embed options.

Highlights

Embedding Local Videos with the Video Tag00:00:00

The tutorial begins by showing how to embed a locally stored MP4 video file onto a website using the HTML `<video>` tag. The `src` attribute is used to specify the video's path, and text can be placed within the tags to display a message if the video cannot be loaded by the browser.

Adding Video Controls and Sizing00:01:38

To enable playback controls (play/pause, volume, full screen), the `controls` attribute must be added to the `<video>` tag. The video's size can be adjusted using `width` and `height` attributes, with the recommendation to only set `width` to maintain aspect ratio automatically.

Customizing Video Thumbnail (Poster) and Playback Behavior00:03:03

A custom thumbnail can be set for the video using the `poster` attribute, which references an image file. Additional attributes like `autoplay` can be used to make the video start playing automatically when the page loads, and `loop` will make the video repeat once it finishes.

Embedding YouTube Videos with Iframes00:04:42

The tutorial then transitions to embedding YouTube videos. This is achieved by using YouTube's 'Share' -> 'Embed' option to generate an `<iframe>` tag. The iframe essentially creates a 'window' to another webpage (in this case, YouTube's video player) directly within the current website.

Customizing Embedded YouTube Videos00:05:48

YouTube provides various options when generating the embed code, such as showing or hiding player controls and video titles. The `width` and `height` attributes of the iframe can also be modified to adjust the size of the embedded YouTube video on the webpage.