To embed a YouTube video in an HTML document, we need to adhere to the following instructions. By following these steps, we can effectively display a YouTube video on a webpage.
Step 1: To begin, the initial step involves uploading a video to YouTube that will later be embedded on a webpage. Subsequently, it is necessary to retrieve the video's ID.
Next, we need to input the HTML code into a text editor or open the current HTML file in the text editor where we wish to insert a video.
<!Doctype Html>
<Html>
<Head>
<Title>
Embed a Youtube video
</Title>
</Head>
<Body>
Hello World! <br>
Hello User! <br>
</Body>
</Html>
Step 3 involves positioning the cursor at the desired location to display the video. Subsequently, it is necessary to specify the <iframe> tag at that particular point.
<!Doctype Html>
<Html>
<Head>
<Title>
Embed a Youtube video
</Title>
</Head>
<Body>
Hello World! <br>
Hello User! <br>
<iframe>
</iframe>
</Body>
</Html>
Step 3: Next, it is necessary to include the attribute of the iframe element called "src". Therefore, input the src attribute inside the <iframe> element.
<!Doctype Html>
<Html>
<Head>
<Title>
Embed a Youtube video
</Title>
</Head>
<Body>
Hello World! <br>
Hello User! <br>
<iframe src="">
</iframe>
</Body>
</Html>
Step 4: Next, we need to specify the URL of the YouTube video that we intend to embed. Therefore, input the video's URL into the src attribute.
<iframe
src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</iframe>
Step 5: Following that, we can define the size of a player by specifying both the width and height using two distinct attributes, as illustrated in the code snippet below:
<iframe
src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" height="400" width="500" >
</iframe>
Step 6: Finally, it is necessary to save the HTML file or HTML code within the text editor, and subsequently execute the file.
<!Doctype Html>
<Html>
<Head>
<Title>
Embed a Youtube video
</Title>
</Head>
<Body>
Hello World! <br>
Hello User! <br>
<iframe height="400" width="500"
src="https://placehold.co/400x300/9b59b6/ffffff?text=Sample+Image">
</iframe>
</Body>
</Html>
The HTML code above displays its output in the screenshot provided below:
Youtube Video Autoplay
To have a YouTube video play automatically when a webpage is loaded, we can utilize the autoplay feature in the HTML document. This allows the video to start playing without requiring any manual interaction from the user.
<!Doctype Html>
<Html>
<Head>
<Title>
Embed a Youtube video
</Title>
</Head>
<Body>
Hello World! <br>
Hello User! <br>
<iframe height="400" width="500"
src="https://placehold.co/400x300/9b59b6/ffffff?text=Sample+Image">
</iframe>
</Body>
</Html>
The screenshot below displays the result of the HTML code above, showcasing the autoplay functionality: