HTML

HTML Media

HTML media contain various elements and techniques to specify media content or a device for a linked document. It specifies the document for a particular device or user.

HTML Video

The <video> element adds a video to a web page. The supported formats for HTML video are MP4, WebM, and Ogg. MP4 is the best recommended format for YouTube videos.

  • The ‘controls’ attribute adds button controls in the video, like play, pause, etc.
  • With the <source> element, you can define video media resources in different supported formats within the HTML document. 
  • Set the height and width of the video using height and width attributes.
  • Add an autoplay attribute to automatically set the video to play when a user visits the webpage.
<video width="640" height="360" controls autoplay>
    <source src="#" type="video/mp4">
    <source src="#" type="video/webm">
    <source src="#" type="video/ogg">
</video>

HTML Audio

To add an audio file to a webpage, the HTML <audio> element is used. There are various audio formats that you can try, such as MP4, MP3, AAC, Ogg, WAV, etc. Out of all formats, HTML only supports MP3, WAV, and Ogg. The MP3 format is the best.

  • With the controls attribute, you can add control features to the audio file, such as play, pause, and volume. 
  • The <source> element can be added to add audio media in an HTML file. 
  • Use the autoplay attribute to set the audio to play automatically. 
  • To set autoplay audio to mute, add muted after autoplay.
<audio controls autoplay muted>
    <source src="#" type="audio/mpeg">
    <source src="#" type="audio/ogg">
    <source src="#" type="audio/wav">
</audio>

HTML YouTube

The HTML media element embeds YouTube videos in a web page. There is no need to try different video formats; use specific HTML codes to play videos directly on your web page and make the website more interactive.

How to Add YouTube Video in HTML?

You will need an ID to add a YouTube video to your webpage. Get the video ID from YouTube by saving or playing the video. Once you have the ID add an <iframe> element. Insert the video link using the src attribute in HTML and adjust the dimensions of the video using width and height attributes.

<iframe width="350" height="200" 
    src="https://www.youtube.com/embed/jf8Xq9omKxQ">
</iframe>

Autoplay

To let the video play automatically, add autoplay=1 to the YouTube URL. By doing this, the video will play automatically whenever a user visits your website.

Keep in mind: Autoplay is generally restricted in most Chromium-based browsers. However, autoplay will be permitted without issues if the video is muted.

<iframe width="350" height="200" 
    src="https://www.youtube.com/embed/jf8Xq9omKxQ?autoplay=1">
</iframe>

Autoplay & Mute

To mute the autoplay video, add mute=1 after autoplay=1. The video will still play automatically without requiring any action but will be muted.

<iframe width="350" height="200" 
   src="https://www.youtube.com/embed/jf8Xq9omKxQ?autoplay=1&mute=1">
</iframe>

YouTube Playlist

To create a YouTube playlist, include the video IDs after the original URL using the playlist parameter. Separate each video ID with a comma.

<iframe width="360" height="215" 
    src="https://www.youtube.com/embed/jf8Xq9omKxQ?
    playlist=XFxG5HRHpgQ,eiv-SdAsIyk,JRpIRBmBY98">
</iframe>

Play in Loop

The loop value, by default, is zero, and the video is played only once. To play a video in a loop, add loop=1.

<iframe width="560" height="315" 
    src="https://www.youtube.com/embed/jf8Xq9omKxQ?
    playlist=XFxG5HRHpgQ,eiv-SdAsIyk,JRpIRBmBY98&loop=1">
</iframe>

Video Controls

If you don’t want to display video controls in the player, add controls=0. Use control=1 to display the video player controls.

<iframe width="350" height="200" 
    src="https://www.youtube.com/embed/jf8Xq9omKxQ?controls=0">
</iframe>

Integrating the HTML media elements makes a web page interactive and enhances user engagement.  It also gives a visually appealing look to the webpage.

Prev
Next
Scroll to Top