YouTube Media in HTML
HTML5 embeding YoutTube Video
Embeding video onto a web page is not relatively easy, because browsers does not have a uniform standard for defining embedded media files onto a web browser. However YouTube will host your videos and you can easily embed them into your website. Knowing how to embed YouTube videos allows you to build user experience on your web page even more.
Important for Embeding YoutTube Video:
- The <iframe> tag is used to embed a video from YouTube in a website or web page.
- The <video> and <embed> tags are similar, but the
<iframe>
tag is the recommended tag for displaying Youtube videos. - The
<iframe>
element can support any sort of YouTube video format. - We'll guide you through the steps to learn how to embed a Youtube video on your page.
Steps to learn how to embed a YouTube video onto a site.
- Visit Youtube and upload a video.
- Copy the video ID. If the URL looks like this: https://www.youtube.com/watch?v=Ok-TRRSV9HI, the ID will be Ok-TRRSV9HI.
- Specify an
<iframe>
element in the web page. - Write the
src
attribute as https://www.youtube.com/watch?v=Ok-TRRSV9HI[Your_Video_ID]. In this case, it is https://www.youtube.com/embed/Ok-TRRSV9HI. - Define size with the
height
andwidth
attributes. - Add parameters in the tag code depending on the settings you wish.
Attribute | Value | Description |
---|---|---|
autoplay |
autoplay |
This Boolean attribute specifies that the audio will automatically start playing as soon as it can do so without stopping to finish loading the data. |
controls |
controls |
If specified, the browsers will display controls to allow the user to control audio playback, such as play/pause, volume, etc. |
loop |
loop |
This Boolean attribute specifies that the audio will automatically start over again, upon reaching the end. |
muted |
muted |
This Boolean attribute specifies whether the audio will be initially silenced. The default value is false, meaning that the audio will be played. |
preload |
auto |
Provides a hint to the browser about whether to download of the audio itself or its metadata. The autoplay attribute can override this attribute, because if you want to automatically play a audio, the browser will obviously need to download it. |
src |
URL | Specifies the location of the audio file. Alternatively, you can use the preferred <source> tag as it allows for multiple options. |