Embedding YouTube videos on a website
Overview
We can embed our favorite Youtube video on a website in three simple steps. First, we have to understand what an iframe is.
Defining <iframe>
An iframe is an HTML tag that we use to specify an inline frame.
We use inline frames to embed a different document in our HTML document. We can embed videos, audio, PDFs, and other documents using the iframe tag.
We can also style our iframe using CSS.
It is always useful to assign a value to the title attribute of an iframe. The iframe tag has several attributes such as height, width, src, name, allow, etc.
Now, let’s look at the steps to embed a Youtube video.
Step 1
We identify and copy the play id/URL of our Youtube video. We’ll share this URL so that anyone can view and access our video on Youtube. You can get this play id as follows:
- Go to your channel, click on the view you wish to embed as to watch it.
- Either copy the url on the for sharing option, or if on a browser copy the url of the video as it plays on the browser. The image below show a simple example of such url.
We also have to do minor edits for a successfully copied URL, which is step 2.
Step 2
We’ll edit the copied URL which should look like this:
https://www.youtube.com/watch?v=YLslsZuEaNE
We’ll delete watch?v= from it to have something like this:
https://www.youtube.com/YLslsZuEaNE
Add embed/ after .com/. The URL will look like this:
https://www.youtube.com/embed/YLslsZuEaNE
With these basic URL settings, we can embed our video and see it play on our website.
Step 3
In step 3, we create an HTML file and set it up anyhow we want. be sure to have something like below in the body tag to allow our video to be embedded.
<body>
<iframe>
</body>
Now the <iframe> tag has some attributes. We’ll use just four of them in this shot — the width, height, src, and title. These attributes will be added to the HTML <iframe> tag.
Meanwhile, the value of the src attribute should be our edited URL. See below:
<body>
<iframe title = "Our Sample" src = "https://www.youtube.com/embed/YLslsZuEaNE" width = "200px" height = "200px">
</body>
Code
We will use the code shown above in the code widget to successfully embed our Youtube video into the HTML document.
Explanation
Here’s a brief code explanation of the HTML file:
- Line 1: Start the
htmltag and close on line 6. - Lines 2 and 5: Start and close the
bodytag respectively. - Lines 3 and 4: Start the
iframetag to embed the youtube video and end respectively.
Conclusion
We can add some of the Youtube video features to the embedded video using the features as below:
loop=1means loop istrue, while0isfalse.autoplay=1will meantrue,autoplay=0meansfalse.controls=1will make the video control to show:true, while0isfalse.