HTML YouTube Videos
YouTube is the easiest way to play HTML videos.
Struggling with Video Formats?
Allowing YouTube to play videos in your web page is a simpler approach.
YouTube Video Id
When you save (or play) a video on YouTube, an id (such as tgbNymZ7vqY) will appear.
You may use this id in the HTML code to refer to your video.
Playing a YouTube Video in HTML
To play your video on a web page, do the following:
- Put the video to YouTube.
- Make a mental note of the video's identifier.
- In your web page define a
iframeelement - Allow
srcto link to the URL of the video. - Use attributes like
widthandheightto indicate the player dimension - Any more arguments should be added to the URL (see below)
Example
<iframe width="420" height="315"
src="https://www.youtube.com/embed/O6mwkeIVMpI">
</iframe> Result of the above code is:
Related Links
YouTube Autoplay + Mute
If a visitor views the website, autoplay=1 may be added to the Youtube URL to allow your video to start playing automatically. Automatically launching a video, on the other hand, is inconvenient for your visitors.
Note: In most circumstances, Chromium browsers do not support autoplay. Muted autoplay, on the other hand, is always permitted.
Add mute=1 to allow your video to play automatically after autoplay=1 (but muted).
YouTube Autoplay + Muted
<iframe width="420" height="315"
src="https://www.youtube.com/embed/O6mwkeIVMpI?autoplay=1&mute=1">
</iframe> Result of the above code is:
YouTube Playlist
A collection of videos to watch, separated by commas (in addition to the original URL).
It is also used for YouTube Playlist example, YouTube Playlist template, YouTube Playlist widget
YouTube Loop
Add loop=1 to allow your video to continue.
The video will play only once if the value is 0 (the default).
Value 1: The video is going through (forever).
YouTube - Loop
<iframe width="420" height="315"
src="https://www.youtube.com/embed/O6mwkeIVMpI?playlist=tgbNymZ7vqY&loop=1">
</iframe> Result of the above code is:
Related Links
YouTube Controls
Controls=0 are added to the video player to avoid displaying controls.
Value 0: The player controls aren't visible.
Value 1 (default): The player is in charge of the display.
YouTube - Controls
<iframe width="420" height="315"
src="https://www.youtube.com/embed/O6mwkeIVMpI?controls=0">
</iframe> Result of the above code is: