HTML YouTube
YouTube is a video sharing service where users can watch, like, share, comment and upload their own videos. The video service can be accessed on PCs, laptops, tablets and via mobile phones and it can be embedded in HTML document also.
YouTube Video Id
Go to YouTube and find the video you want to share. ... On the "Share" portion, you'll see a YouTube URL. The YouTube ID will be the portion at the end of the URL after the last slash.
Syntax
https://www.youtube.com/embed/VIDEO_ID
In this example, the YouTube ID is "KrM107U_uRg".
Example
<iframe width="560" height="315" src="https://www.youtube.com/embed/KrM107U_uRg" ></iframe>
Embedding YouTube Video in HTML
To play your video on a web page using YouTube server, the following is the spets:
Steps:
1. Firts, upload the video to YouTube.
2. Click on share video copy or there will be embed option also.
3. Use <iframe> element in your web page.
4. Specify src attribute point to the video URL, specify the width and height attributes and add any other parameters to the URL.
Example
<iframe width="560" height="315" src="https://www.youtube.com/embed/KrM107U_uRg" ></iframe>
YouTube Start and End
To set a specific start and end time for an embedded YouTube video on your site, you just need to grab the embed code, add a line of code to the source link, then your start and end times.
Steps:
1. First, copy your video embed code.
2. Next, create your line of code to change the start and end times.
For example, this code starts at 30 seconds and ends at 120 seconds into the video. Change it to your own start and end times.
Example:
?start=30&end=120
3. Now, add your code to the end of the source link in the embed code.
4. The highlighted section is the source link. Once you have found the source link, add the code you created to the end of that.
5. The end result should look like this:
Example
<iframe width="560" height="315" src="https://www.youtube.com/embed/KrM107U_uRg?start=30&end=120" ></iframe>
YouTube Mute
You can set video to mute when a user visits the page, by adding mute=1 to the YouTube URL. However, muting a video is good for your visitors.
Example
<iframe width="560" height="315" src="https://www.youtube.com/embed/KrM107U_uRg?mute=1" ></iframe>
YouTube Autoplay
This parameter specifies whether the initial video will automatically start to play when the player loads. Supported values are 0 or 1. The default value is 0.
Example
<iframe width="560" height="315" src="https://www.youtube.com/embed/KrM107U_uRg?autoplay=1" ></iframe>
YouTube Controls
This parameter indicates whether the video player controls are displayed:
- controls=0 – Player controls do not display in the player.
- controls=1 (default) – Player controls display in the player.
Example
<iframe width="560" height="315" src="https://www.youtube.com/embed/KrM107U_uRg?controls=0" ></iframe>
YouTube Loop
YouTube has a loop feature on that allows users to watch a single video on loop.
In the case of a single video player, a setting of 1 causes the player to play the initial video again and again. In the case of a playlist player (or custom player), the player plays the entire playlist and then starts again at the first video.
Add loop=1 to your video loop forever.
Value 0 (default): The video will play only once.
Value 1: The video will loop forever.
Example
<iframe width="560" height="315" src="https://www.youtube.com/embed/KrM107U_uRg?loop=1" ></iframe>
Note: This parameter has limited support in IFrame embeds.
YouTube Playlist
This parameter specifies a comma-separated list of video IDs to play. If you specify a value, the first video that plays will be the VIDEO-ID specified in the URL path, and the videos specified in the playlist parameter will play thereafter.
Example
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLnj9UGe965p36Q4ETJihwNKVCajCnZHks" title="YouTube video player" ></iframe>