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 and width 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
metadata
none
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.