We can embed our favorite Youtube video on a website in three simple steps. First, we have to understand what an iframe is.
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
We can also style our
iframe using CSS.
It is always useful to assign a value to the
title attribute of an
iframe tag has several attributes such as
Now, let’s look at the steps to embed a Youtube video.
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:
We also have to do minor edits for a successfully copied URL, which is step 2.
We’ll edit the copied URL which should look like this:
watch?v= from it to have something like this:
.com/. The URL will look like this:
With these basic URL settings, we can embed our video and see it play on our website.
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>
<iframe> tag has some attributes. We’ll use just four of them in this shot — the
title. These attributes will be added to the HTML
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>
We will use the code shown above in the code widget to successfully embed our Youtube video into the HTML document.
Here’s a brief code explanation of the HTML file:
htmltag and close on line 6.
iframetag to embed the youtube video and end respectively.
We can add some of the Youtube video features to the embedded video using the features as below:
1means loop is
1will make the video control to show:
View all Courses