HTML Youtube Videos

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML YouTube Videos

 Using YouTube makes it easy to play videos in HTML.

Struggling with Video Formats?

Converting videos to different formats can be It is difficult and time-consuming to convert videos to different formats.

The solution is to let YouTube play the videos on your web page.

YouTube Video Id

YouTube displays an id when you save (or play) a video.

This id can be used to refer to your video in the HTML code.

Playing a YouTube Video in HTML

To play the video on a web page, do the following:

Upload the video to YouTube

  • Note down the video id.
  • Specify an <iframe> element in your web page.
  • Let the src attribute indicate the video URL.
  • Apply the width and height attributes to specify the dimension of the player.
  • Add any other parameters to the URL as per requirement.
				
					<div class="rll-youtube-player" data-src="https://www.youtube.com/embed/tgbNymZ7vqY" data-id="tgbNymZ7vqY" data-query=""></div><noscript><iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
				
			

YouTube Autoplay + Mute

Let your video start playing automatically as soon as the user visits the page, by adding autoplay=1 to the YouTube URL.

Add mute=1 after autoplay=1 to , this will allow the video to start playing automatically (but muted).

Example

				
					
<div class="rll-youtube-player" data-src="https://www.youtube.com/embed/tgbNymZ7vqY" data-id="tgbNymZ7vqY" data-query="autoplay=1&amp;mute=1"></div><noscript><iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe></noscript>


				
			

How it Functions

  • The controls attribute is used for adding the video controls, like play, pause, and volume.
  • Always include width and height attributes. The page may flicker when the video loads if the height and width are not set.
  • The <source> element specifies alternative video files, chosen by the browser. The browser recognizes the first used format.

HTML <video> Autoplay

Using the autoplay attribute, starts a video automatically:

				
					<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>