How to insert YouTube videos on our website (HTML)?
YouTube is a digital content platform where you can find all kinds of videos, YouTube has grown in all aspects in recent years, giving options for everything, including to easily insert videos on our website:
Select a YouTube video -> click "Share" -> click "Embed" tab
Once we get our video that we want to insert into our HTML web page; In our case, we want to insert the following video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0" allowfullscreen></iframe>By directly using YouTube videos we can save a lot of work; For example, avoid converting videos into different formats to support different browsers, different social options for sharing the YouTube video, etc.
Parsing the attributes of the previous HTML
Looking at the previous code obtained from YouTube, we realize that it is nothing more than a simple HTML, specifically an iframe, with a series of attributes that we will see below:
- The width and height attributes to specify the dimensions of the video.
- The allowfullscreen attribute to enable Full Screen mode or so that the video can occupy the entire screen.
- Finally the src attribute in which the URL of the YouTube video is placed; this is the only attribute that must be changed if you want to place another YouTube video; in addition to the source or video to reference from YouTube, it is possible to establish other parameters in the URL:
YouTube Video URL Parameters
In this section we will see some of the main parameters to place in the URL of the videos:
autohide They indicate the status of the video controls: | Setting it to zero (0) means the controls are always visible: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?autohide=0" allowfullscreen </iframe> Setting it to one (1) means that the controls are hidden when you start playing the video: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0? autohide=1" allowfullscreen></iframe> (Default) If set to two (2) and depending on the proportions of the video, the behavior of the controls will vary; for aspect ratio equal to 16:9 or 4:3 it will behave the same as if the value was set to one, any other aspect ratio will behave as if the value was set to zero: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?autohide=2" allowfullscreen></iframe> |
autoplay Indicates the behavior of the video when loading is complete: | (Default) If set to zero (0) it means the video does not start automatically: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?autoplay =0" allowfullscreen></iframe> If set to one (1) it means the video starts automatically: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?autoplay=1" allowfullscreen> </iframe> |
controls Provides different options to indicate the behavior of the video controls: | Setting it to zero (0) means the controls are not displayed; therefore, the Flash player automatically loads: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?controls=0" allowfullscreen></iframe> (Default) If set to one (1) it means that the controls are displayed and the Flash player loads automatically: <iframe width="560" height="315" src="https://www.youtube.com /embed/85MppyLJHz0?controls=1" allowfullscreen></iframe> Setting it to two (2) means that the controls are displayed but the Flash player loads when the user starts playback: <iframe width="560" height="315" src="https://www.youtube .com/embed/85MppyLJHz0?controls=2" allowfullscreen></iframe> |
loop Here you specify whether the video should be played again once it ends (loop) | (Default) If set to zero (0) the video does not play when it ends: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0 ?loop=0" allowfullscreen></iframe> If set to one (1) the video plays again when the video ends: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?loop= 1" allowfullscreen></iframe> |
| playlist This option allows you to create PlayList; To do this we must separate the videos by commas (,). | |
showinfo This option allows you to indicate whether to show (1) or not (0) the information in the video title: | <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?showinfo=1" allowfullscreen></iframe> |
disablekb This option allows you to disable (1) or activate (0) keyboard controls: | <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?disablekb=1" allowfullscreen></iframe> |
start Allows you to specify (in seconds) based on an integer value where the video begins; for example, if we wanted to start a video in 5 seconds: | <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?start=5" allowfullscreen></iframe> |
end Allows you to specify (in seconds) based on an integer value when the player should stop; for example, if we wanted to stop a video in 5 seconds: | <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?end=5" allowfullscreen></iframe> |
Adaptive or responsive YouTube videos
If you want to know how to make YouTube videos responsive or adaptable, you can consult the following entry in which we discuss that topic:
You can find the official and complete documentation at: YouTube Built-in Players and Player Parameters.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter