HTML5 - SPLessons

HTML5 YouTube

Chapter 14

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 YouTube

HTML5 YouTube

shape Introduction

Present chapter demonstrates about the HTML5 YouTube. Some file formats are not supported by HTML5. So, in order to make those files work, convert the files which is a big process. Instead of converting, using HTML5 YouTube is an easy process. Following are the concepts covered.

  • YouTube Parameters
  • HTML5 You Tube embeded

YouTube Parameters

shape Description

In order to use the YouTube, upload the video into the YouTube, through which the video can be accessed from anywhere i.e. user can work on server side instead of working on local side following are some of HTML5 YouTube Attributes.

Exceptions Description
autohide The attribute hide all the components while playing.
autoplay The attribute used to play the videos automatically.
controls the attribute may control visible while loading.
loop by using the attribute videos will play repeatedly.
playlist the URL of every video separate by comma.

HTML5 YouTube embeded

shape Description

HTML5 YouTube embed means embedding the YouTube video into the web pages which is an easier task. When any user visits the web page, video will be played directly from YouTube on the web pages and also Flash Player allows to see in a full screen mode. The below steps demonstrates how to embed the YouTube video into the web pages.

shape Step 1

Initially select the YouTube video as shown in below image.

In order to embed the video either copy the URL or click the Share option as shown in below image.

shape Step 2

Now click on the Embed option. Copy the code and paste it in HTML body tags as shown in below image.

shape Step 3

The code below demonstrates complete code for embedding YouTube video.

<!DOCTYPE html>
<html>
  <body>

    <iframe width="420" height="315" src="https://www.youtube.com/embed/TZ1pCAtaCl4" frameborder="0" allowfullscreen></iframe>

  </body>
</html>

shape Step 4

Now run the above code in preferred browser.Video appears as the output in web page and its runs successfully as shown in below image.

shape Step 5

User can also embed the video by copying the URL and pasting the code using embed tags as shown in below code.

<!DOCTYPE html>
 <html> 
   <head> 
     <title>HTML Video Tag Example</title> 
   </head> 
     <body> 
       <object width="425" height="350"> 
         <param name="movie" value="https://www.youtube.com/v/TZ1pCAtaCl4&feature=youtu.be" /> 
         <embed src="https://www.youtube.com/v/TZ1pCAtaCl4&feature=youtu.be" type="application/x-shockwave-flash"  width="425" height="350" />
       </object>
     </body>
</html>

shape Step 6

Run the above code in a preferred browser then output video get displayed the image is as shown below.

Summary

shape Points

  • YouTube parameters helps to control the videos.
  • By using Flash Player videos can see in full screen.
  • By using share option user can embed the you tube video.