HTML can be used to play videos in your web page. The easiest way to play videos in HTML is by using YouTube.
Why use HTML YouTube?
As different browser supports different video formats and you might want to convert your videos into different video formats to make it play in all browsers. You might be aware of converting videos into different formats. It is time-consuming to convert the videos each time, thus HTML YouTube came into picture. YouTube can be used to play the videos in your HTML page without converting them.
Now let us look into How to Add a YouTube Video to Your Web Site?
We have already learned that embedding a video in your web page require us to take care of the format of videos. This is because your user might not have the proper software installed to see the videos in the format in which you have uploaded it in the web page.
Embedding a video into a web page is as easy as cutting and pasting code. You can add YouTube videos to your website by using either the iFrame or object HTML tags.
-
Use the YouTube site to find the video you want to embed.
Click the ‘Share’ button below the video
-
Click the ‘Embed’ button to the link they show you
-
Copy the given IFrame code and paste it into the HTML of your web page.
-
Let the src attribute point to the video URL.
-
Use the width and height attributes to specify the dimensions of the player.
-
Add any other parameters to the URL if required.
Example of using iFrame
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body> <iframe width="560" height="315" src="https://www.youtube.com/embed/7nipSdxv2Uo" frameborder="0" allowfullscreen></iframe> </body> </html> |
We can also use <object> tag to embed the video
YouTube <object> Embeds
Using <object>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <object width="420" height="315" data="https://youtu.be/7nipSdxv2Uo"> </object> </body> </html> |
Example – Using <embed> (deprecated)
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body> <embed width="420" height="315" src="https://youtu.be/7nipSdxv2Uo"> </body> </html> |
Now let us have a look into YouTube Parameters
1.autohide: It decides the visibility of player controller.
|
Value 0 |
The player controls are always visible. |
|
Value 1 |
The player controls hide automatically when the video plays. |
|
Value 2 |
If the player has 16:9 or 4:3 ratios, same as 1, otherwise same as 0. |
2.autoplay: It decides whether to play the video automatically.
|
Value 0 |
The video will not play automatically when the player loads. |
|
Value 1 |
The video will play automatically when the player loads. |
3.controls: It decides whether to load the video immediately.
|
Value 0 |
Player controls do not display. The video loads immediately. |
|
Value 1 |
Player controls display. The video loads immediately. |
|
Value 2 |
Player controls display, but the video does not load before the user initiates playback. |
-
Loop: It decides how many times the video will play.
|
Value 0 |
The video will play only once. |
|
Value 1 |
The video will loop (forever). |
Conclusion:
I hope you understood how to add a video into your web page with your required parameters. If you have any other query do write us at support@acadgild.com or Visit here
Leave a Reply