Learn HTML YouTube Videos Code

Tips (Total 9)

1. What is Struggling with Video Formats?

2. What is HTML YouTube Video Id

3. How to add Playing a YouTube Video in HTML

4. How to add HTML YouTube Video Autoplay

5. How to add muted in Youtube HTML Embed Video

6. How to set HTML YouTube Video Autoplay + Mute

7. How to add Youtube Video Embed Playlist

8. How to Loop HTML YouTube Video

9. How to add HTML YouTube Video Controls

# Tips-1) What is Struggling with Video Formats?

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

An easier solution is to let YouTube play the videos in your web page.

Different versions of different browsers support different video formats.

Earlier in this tutorial, you have seen that you might have to convert your videos to different video formats to make them play in all browsers.

Converting videos to different format can be difficult and time consuming.

An easier solution might be to let YouTube play the videos in your web page.

# Tips-2) What is HTML YouTube Video Id

YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video.

You can use this id, and refer to your video in the HTML code.

Example to go a Youtube Video by Link using id

https://www.youtube.com/watch?v=MJ49xD7yXT4

Example of adding HTML Video using id to your HTML Page

<iframe width="400" height="230" src="https://www.youtube.com/embed/lJIrF4YjHfQ" title="Embed videos and playlists" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Output should be:

# Tips-3) How to add Playing a YouTube Video in HTML

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

Upload the video to YouTube
Take a note of the video id
Define an <iframe> element in your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the dimension of the player
Add any other parameters to the URL (see below)

Example of Playing Code in your HTML Page

 <iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

Output should be:

# Tips-4) How to add HTML YouTube Video Autoplay

You can let your video start playing automatically when a user visits the page, by adding autoplay=1 to the YouTube URL. However, automatically starting a video is annoying for your visitors!

Example of Auto Play Youtube Video in Your HTML Page

Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>

</body>
</html>

Output should be:

# Tips-5) How to add muted in Youtube HTML Embed Video

Add mute=1 to let your video start playing automatically (but muted).

Example Youtube Video Auto Mute

Use ?mute=1 tag end of embed video link Example: https://www.youtube.com/embed/tgbNymZ7vqY?mute=1

index.html

Example: HTML

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?mute=1">
</iframe>

Output should be:

Full Example Youtube Video Auto Mute

Use ?mute=1 tag end of embed video link Example: https://www.youtube.com/embed/tgbNymZ7vqY?mute=1

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?mute=1">
</iframe>

</body>
</html>

Output should be:

# Tips-6) How to set HTML YouTube Video Autoplay + Mute

You can let your video start playing automatically when a user visits the page, by adding autoplay=1 to the YouTube URL. However, automatically starting a video is annoying for your visitors!

Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

Add mute=1 after autoplay=1 to let your video start playing automatically (but muted).

Example of YouTube Autoplay + Mute

Add mute=1 after autoplay=1 to let your video start playing automatically (but muted).

index.html

Example: HTML

 <iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>

Output should be:

# Tips-7) How to add Youtube Video Embed Playlist

A comma separated list of videos to play (in addition to the original URL).

For more Understanding: Youtube Developer

Example of HTML Youtube Video Playlist

Try following Code

index.html

Example: HTML

<iframe id="ytplayer" type="text/html" width="100%" height="405"
src="https://www.youtube.com/embed/?listType=playlist&list=PL590L5WQmH8eYTXiTTjzo4YnK7vkCqZTI"
frameborder="0" allowfullscreen>

# Tips-8) How to Loop HTML YouTube Video

Add loop=1 to let your video loop forever.

Value 0 (default): The video will play only once.

Value 1: The video will loop (forever).

What is LoopTube

Repeat YouTube Video in AB Loop

What is LoopTube:

LoopTube is a free online tool to repeat any YouTube videos. Just select YouTube videos by typing a URL in the search bar, and you can set AB loop in any point of the video. This is useful when you want to learn some kind of skills (such as languages, sports, music, etc.) by watching a specific part over and over.

Features:

Select any YouTube videos by pasting the URL
Repeat full or a part of YouTube video in infinite loop
Control video with simple buttons or keyboard shortcuts
Take notes while controlling video with keyboard shortcuts

Keyboard Shortcuts:

Back: Control key + B
Loop: Control key + L
Pause/Play: Control key + P
Speed up: Control key + U
Speed down: Control key + J

Example of Looping Youtube Video ibn HTML Page

Try Following Code. Add loop=1 to let your video loop forever.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>

</body>
</html>

Output should be:

# Tips-9) How to add HTML YouTube Video Controls

Add controls=0 to not display controls in the video player.

Value 0: Player controls does not display.

Value 1 (default): Player controls display.

Example of adding HTML YouTube Video Controls

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>

</body>
</html>

Output should be:

Keyboard shortcuts for YouTube

With keyboard shortcuts, save time navigating YouTube.

To access the list of Keyboard shortcuts, go to your profile picture Profile , and select Keyboard Shortcuts . You can also enter SHIFT+? on your keyboard. When you mouse over certain player buttons, you’ll see the relevant keyboard shortcut. For example, when you mouse over the full screen icon, you'll see 'Full screen (f),' indicating you can enter f to open full screen.

Subscribe to the YouTube Viewers channel for the latest news, updates, and tips.

Keyboard shortcuts

If you're using the new computer experience, you must click the video player before using keyboard shortcuts. To return to the classic computer experience, go to the profile picture and click Restore old YouTube.

Keyboard shortcut	Function
Spacebar	Play/Pause when the seek bar is selected. Activate a button if a button has focus.
Play/Pause Media Key on keyboards	Play / Pause.
k	Pause/Play in player.
m	Mute/unmute the video.
Stop Media Key on keyboards	Stop.
Next Track Media Key on keyboards	Moves to the next track in a playlist.
Left/Right arrow on the seek bar	Seek backward/forward 5 seconds.
j	Seek backward 10 seconds in player.
l	Seek forward 10 seconds in player.
.	While the video is paused, skip to the next frame.
,	While the video is paused, go back to the previous frame.
>	Speed up the video playback rate.
<	Slow down the video playback rate.
Home/End on the seek bar	Seek to the beginning/last seconds of the video.
Up/Down arrow on the seek bar	Increase/Decrease volume 5%.
Numbers 1 to 9	Seek to the 10% to 90% of the video.
Number 0	Seek to the beginning of the video.
/	Go to search box.
f	Activate full screen. If full screen mode is enabled, activate F again or press escape to exit full screen mode.
c	Activate closed captions and subtitles if available. To hide captions and subtitles, activate C again.
Shift+N	Move to the next video (If you're using a playlist, will go to the next video of the playlist. If not using a playlist, it will move to the next YouTube suggested video).
Shift+P	Move to the previous video. Note that this shortcut only works when you're using a playlist.
i	Open the Miniplayer.