The easiest way to play videos in HTML, is to use YouTube. Now days YouTube becomes very big platform for video content, so in this tutorial we will learn that how we can take use of this grate platform for our html web-page.
YouTube allows
YouTube allows users to upload, view, rate, share, add to favorites, report, comment on videos, and subscribe to other users. It offers a wide variety of user-generated and corporate media videos. Available content includes video clips, TV show clips, music videos, short and documentary films, audio recordings, movie trailers, live streams, and other content such as video blogging, short original videos, and educational videos.
Playing a YouTube Video in HTML
- Upload the video to YouTube
- Take a note of the video id (eg - VnT7pT6zCcA)
- 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
Note : Video content with has security and privacy concern, never upload them on YouTube, because anyone can watch and download your video on YouTube if you don’t know how to protect them on YouTube.
To upload video on YouTube
- Create your account on YouTube or you can login with your google account.
- Create a channel on YouTube.
- Upload you video in your channel.
How to use YouTube video in HTML page?
There are several elements which allows to link YouTube video in html page, like iframe, object, embed etc. follow below listed steps to attach YouTube video on you web page.
- Visit on YouTube and play your desire video, which you want to attach in your HTML page.
- Click on SHARE, it is just below to video which is being played.
- In opened popup click on embed option and copy html code from popup.
- Now past copied html code in your html web page at desire place.
Using iframe Example
<iframe width="420" height="300" src="https://www.youtube.com/embed/VnT7pT6zCcA"></iframe>
Result
YouTube Autoplay
- Value 0 (default): The video will not play automatically when the player loads.
- Value 1: The video will play automatically when the player loads.
Autoplay
<iframe width="420" height="300"
src="https://www.youtube.com/embed/VnT7pT6zCcA?autoplay=1">
</iframe>
Youtube Playlist & Loop
- Value 0 (default): The video will play only once.
- Value 1: The video will loop.
YouTube Loop
<iframe width="420" height="300"
src="https://www.youtube.com/embed/VnT7pT6zCcA?paylist=VnT7pT6zCcA&loop=1">
</iframe>
Youtube Controls
- Value 0: Player controls does not display.
- Value 1 (default): Player controls display.
YouTube Controls
<iframe width="420" height="300"
src="https://www.youtube.com/embed/VnT7pT6zCcA?controls=0">
</iframe>
Using <object> Tag
We can pass copied YouTube video url in src attribute of object element. We can use other attributes of this element according to our requirement.
<object width="420" height="300"
src="https://www.youtube.com/embed/VnT7pT6zCcA">
</object>
Using <embed> Tag
Same as object element we can also use <embed> element for embedding YouTube video in html web page.
<embed width="420" height="300"
src="https://www.youtube.com/embed/VnT7pT6zCcA">
</embed>
Youtube History
YouTube is an American video-sharing website headquartered in San Bruno, California. The service was created by three former PayPal employees Chad Hurley, Steve Chen, and Jawed Karim in February 2005. Google bought the site in November 2006 for US$1.65 billion.