« Previous Next »

HTML YouTube Videos

The easiest way to play videos in HTML, is to use YouTube.

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)

Output:

YouTube Autoplay + Mute

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

Output:

YouTube Loop

Output:

YouTube Controls:

Output:

Practice Exercises

Task: How to embed a YouTube video using an iframe with muted autoplay and custom player controls?

Goal: Embed a coding video with a width of 560 and height of 315 that automatically starts playing on load in muted mode and hides the standard player controls.
💡 Hint: Use an <iframe> element pointing to https://www.youtube.com/embed/VIDEO_ID and append the parameters ?autoplay=1&mute=1&controls=0 to the URL.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>YouTube Embed Practice - Part 1</title>
  </head>
  <body>

    <h2>Featured Video (Autoplay & Hidden Controls)</h2>

    <iframe 
      width="560" 
      height="315" 
      src="https://www.youtube.com/embed/kUMe1FH4CHE?autoplay=1&mute=1&controls=0" 
      title="YouTube video player"
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen>
    </iframe>

  </body>
</html>
Output:

Featured Video (Autoplay & Hidden Controls)

Explanation:
  • autoplay=1: Tells the YouTube player to start playing the video automatically when loaded.
  • mute=1: Mutes the audio. Web browsers block unmuted autoplay to prevent unwanted noise for users.
  • controls=0: Hides the default play/pause buttons, volume slider, and video seek bar.
Task: How to configure a single YouTube video to loop continuously using the loop and playlist parameters?

Goal: Create an embedded YouTube video player with visible controls that loops a short HTML coding video indefinitely upon reaching the end.
💡 Hint: For a single video to loop on YouTube, you must combine loop=1 with the playlist=VIDEO_ID parameter set to the exact same video ID in the source URL string.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>YouTube Embed Practice - Part 2</title>
  </head>
  <body>

    <h2>Continuous Looping Video Player</h2>

    <iframe 
      width="560" 
      height="315" 
      src="https://www.youtube.com/embed/UB1O30fR-EE?loop=1&playlist=UB1O30fR-EE&controls=1" 
      title="YouTube Looping Video"
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen>
    </iframe>

  </body>
</html>
Output:

Continuous Looping Video Player

Explanation:
  • Updated Video: FreeCodeCamp HTML Full Course / Short Coding Tutorial (Video ID: UB1O30fR-EE).
  • Loop Mechanism: Combining loop=1 and playlist=UB1O30fR-EE ensures that when this specific coding video finishes, YouTube restarts it automatically.
« Previous Next »