The easiest way to play videos in HTML, is to use YouTube.
Struggling with Video Formats?
in the earlier parts of this tutorial, you must have seen that you need to convert the videos to different formats for playing them seamlessly in all browsers.
Conversion of videos to desirable playable formats is pretty difficult and takes a lot of time.
There is an easy solution for this which is letting YouTube play the videos in your web page.
YouTube Video Id
YouTube will be displaying an id (like XGSy3_Czz8k), when you are saving (or playing) a video.
You can utilise this id, and make a reference to your video in the web page HTML code.
Playing a YouTube Video in HTML
For playing your video on a web page, the following needs to be done:
Example - Using iFrame (recommended)
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Try it Yourself
YouTube Autoplay
You can have the option to play your video automatically when a user is visits that page by addition of a simple parameter to the required YouTube URL.
Note: Careful consideration is needed while deciding for videos autoplay. Automatic start of a video could annoy your visitor and can impact by causing more harm than good.
Value 0 (default): When the player loads, the video will not play automatically.
Value 1: When the player loads, the video will play automatically .
YouTube - Autoplay
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
Try it Yourself
YouTube Playlist
A comma is used to separate the list of videos to play (in addition to the original URL).
YouTube Loop
Value 0 (default): The video will be playing only once
Value 1: The video will be playing in loop (forever).
YouTube - Loop
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?playlist=XGSy3_Czz8k&loop=1">
</iframe>
Try it Yourself
YouTube Controls
Value 0: Player controls will not get displayed.
Value 1 (default): Player controls gets displayed.
YouTube - Controls
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?controls=0">
</iframe>
Try it Yourself
YouTube - Using <object> or <embed>
Note: YouTube <object> and <embed> got deprecated from January 2015. You should be migrating your videos for using <iframe> instead.
Example - Using <object> (deprecated)
<object width="420" height="315"
data="http://www.youtube.com/embed/XGSy3_Czz8k">
</object>
Try it Yourself
Example - Using <embed> (deprecated)
<embed width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
Try it Yourself