HTML5 Youtube

Summary -

In this topic, we described about the below sections -

Youtube
- Struggling with Video Formats?
- What is html5 YouTube

Struggling with Video Formats?

We might have to convert the videos to various formats to make them play on all browsers due to the common supporting formats are very less by all browsers. Converting videos to various formats can be time takening and complicated process.

Sometime ago, inserting a video to a webpage was a true challenge since one had to convert the videos to various formats to make them play in all browsers. Transferring videos to various layouts can be tough and time-takening. Considering all these drawbacks, HTML5 came up with a feature of adding videos by using YouTube that makes of adding videos to a webpage has become as simple as copy and paste.

YouTube supports to host a video of any format for a client and provides a unique URL for each video uploaded. We can use the URL to embed the video on web pages.

What is HTML5 YouTube?

YouTube accepts all types of videos to upload and get them played without converting it. YouTube also supports adding YouTube links to the HTML tags and get them played on the webpages without downloading.

YouTube shows an unique generated id like "vW9gsjZwJwY" for every uploaded video after uploaded. We can use the same id for playing the video on webpages in future. This id additionally used as a reference for the YouTube video to be embedded on the web page.

Advantages -

Visibility - After google, YouTube is 2nd best search engine. Just uploading the video on YouTube raises our chances of being noticed if someone is performing a search. We could drive traffic to our website if our videos are uploaded on YouTube.
Complimentary CDN - YouTube is essentially a Content Sharing Network, so we can believe that our video will be well distributed across the world. This may be a huge advantage if our website is on a low-cost simulated server.
Multiple encoding - YouTube automatically encodes our video at different resolutions. So, if we upload an HD video, then YouTube will convert 720p, 480p, 320p, 240p and HD types.
Popular codecs – HD videos are programmed in both H.264 and WebM layout as needed for HTML5.
Easy API - YouTube has a clean and easy API that accepts us to simply embed the video on our website.

Disadvantages -

Limited Thumbnail choice - We can cover our YouTube video on our website with better thumbnails, however this is technologically against the YouTube conditions and terms.
Blocking - After Facebook, YouTube is the 2nd highest blocked area inside companies. This means that our clients, particularly b2b clients, may not be competent to see our video.
Page load time - Web pages with YouTube videos usually loads slower than those with HTML5 videos. Surprisingly, this implies that our web page gets a smaller rating on Google's personal PageSpeed test and will have marginally reduced search ranking.
Visitor leaking - Guests to our website may get confused and discover themselves on the YouTube position rather than ours.

How to get YouTube Video Id?

Once the video uploaded to the YouTube, a generated link appears under the uploaded video. The link that appears under the video is the unique link to watch the video by anyone in future.

For example, the YouTube link appears like below -

https://www.youtube.com/watch?v=vW9gsjZwJwY

In the above link, "https://www.youtube.com/watch?v=" is common for all the YouTube videos except the playlists. The string after "https://www.youtube.com/watch?v=" is the id of the video.

The video id in the link "https://www.youtube.com/watch?v=vW9gsjZwJwY" is "vW9gsjZwJwY". We can use this id to embed video in the HTML code.

How to embed YouTube video to Webpage?

As a first step, we have to create YouTube embedded link to get the video play on the webpage. The embed link syntax shown below -

width_in_pixels - Specifies the video frame width on the webpage in pixels.
height_in_pixels - Specifies the video frame height on the webpage in pixels.
youtube_video_id - Specifies the youtube video id that should embed to the webpage.

Playing a YouTube Video in HTML

We have to follow the below steps to play a video on a webpage by using YouTube -

Upload the video in YouTube.
Take a note of the video id.
Specify an <iframe> element in the web page.
Point the src attribute to the video URL.
To specify the dimension of the player using width and height attributes.
Add any other parameters required to the URL.

Example -

Below example describes about how to display a YouTube video on the webpage.

 <!DOCTYPE html>
<html>
 <body>
  <iframe width="500" height="300"
   src="https://www.youtube.com/embed/vW9gsjZwJwY">
  </iframe> 
 </body>
</html>

Output -

YouTube Autoplay

We can have video playing immediately when a user visits the page. This can be done by adding autoplay option along with the YouTube URL. The syntax can be specified below -

autoplay_value specifies the autoplay is on or off. The possible values are specified below -

0 (default) - The video can’t play immediately when the player loads.
1 - The video plays immediately when the player loads.

Note! We should be very careful when choosing to autoplay options for the videos. Auto playing a video can irritate visitors and end up effecting more damage than good.

Example -

Below example describes about how to autoplay a YouTube video on the webpage.

<!DOCTYPE html>
<html>
 <body>
   <iframe width="500" height="300" 
   src="https://www.youtube.com/embed/IWgGmItbsg8?autoplay=1">
   </iframe>         
 </body> 
</html>

Output -

YouTube Playlist

YouTube provides another option of creating a playlist with most liked videos. HTML5 supports of playing a playlist on webpage. The syntax of the same as follows -

playlist_id - Specifies the playlist id provided by YouTube.

Example -

<!DOCTYPE html>
<html>
 <body>
   <iframe width="500" height="300" 
   src="https://www.youtube.com/embed/vW9gsjZwJwY?playlist=vW9gsjZwJwY">
   </iframe>        
 </body> 
</html>

Output -

YouTube Loop

In the above topic, we have seen how the youtube playlist embed to the webpage. In some cases, the playlist required to play in a loop. To fulfil the requirement, HTML5 provides an option loop. The syntax shown below -

loop_value - Specifies the loop is onetime or continuos.

0 (default) - The video plays only one time and no looping applied.
1 - The video plays continuously (forever).

Example -

Below example describes about how to loop a YouTube video on the webpage

<!DOCTYPE html>
<html>
 <body>
   <iframe width="400" height="250" 
   src="https://www.youtube.com/embed/vW9gsjZwJwY?playlist=vW9gsjZwJwY
   &loop=1">
   </iframe> 
 </body> 
</html>

Output -

YouTube Controls

While embedding the video to the webpage, it is requires to play the video along with the controls that controls the video playing. Because, if users doesn't want to watch the video, then they should have a controls to stop the video playing.

If the control option is specified along with the iframe, all the controls are enabled by default. The syntax specifies below -

controls_value - Specifies the controls are on or off.

0 - Player controls does not show along with YouTube video.
1 (default) - Player controls show along with YouTube video.

Example -

Below example describes about how to show a YouTube video on the webpage without controls.

<!DOCTYPE  html>
<html>
 <body>
   <iframe  width="500" height="300"  
   src="https://www.youtube.com/embed/vW9gsjZwJwY?controls=0">
   </iframe>
 </body>

Output -

Browsers Support

In HTML 5 , YouTube supports all modern browsers, such as Opera, Firefox, Edge and Chrome.