YouTube

YouTube videos are not played using the <video> tag. Instead, YouTube videos are placed into an iframe inside you website.

Example of playing a YouTube video (Run Example)

<!DOCTYPE html> 
<html> 
    <head>
        <title>Course notes example code</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body> 
        <iframe width="540" 
                height="360" 
                src="https://www.youtube.com/embed/g_OOe6WbcyA" 
                frameborder="0" 
                allowfullscreen>
        </iframe>
    </body> 
</html>

A YouTube video can be made to automatically play when a webpage loads using the autoplay url parameter. YouTube force you to mute any video that loads on autoplay. The example below will automatically play the YouTube video when the webpage loads.

Example of a YouTube video automatically playing when a webpage loads (Run Example)

<!DOCTYPE html> 
<html> 
    <head>
        <title>Course notes example code</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body> 
        <iframe width="640" 
                height="360" 
                src="https://www.youtube.com/embed/g_OOe6WbcyA?autoplay=1&mute=1" 
                frameborder="0" 
                allowfullscreen>
        </iframe>
    </body> 
</html>

The start time and the end time of a YouTube video can be set using the srart and end url parameters. Note, that both the start and end are given in seconds.

Write code to display the YouTube video at the link https://www.youtube.com/watch?v=g_OOe6WbcyA. The video should start automatically and it should only play from 61 seconds until 74 seconds inclusive, as shown here.

 
<div align="center"><a href="../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>