How to Embed Youtube Video in Html
Web structure starts with solid HTML. Learn how How to Embed Youtube Video in Html contributes to accessible and semantic web pages in the tutorial below.
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:
