Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
css
youtube
communitycreator

Embedding YouTube videos on a website

NDUKWE CHIDERA K.

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.

Code to embed YouTube video

Explanation

Here’s a brief code explanation of the HTML file:

  • Line 1: Start the html tag and close on line 6.
  • Lines 2 and 5: Start and close the body tag respectively.
  • Lines 3 and 4: Start the iframe tag 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=1 means loop is true, while 0 is false.
  • autoplay=1 will mean true, autoplay=0 means false.
  • controls=1 will make the video control to show:true, while 0 is false.

RELATED TAGS

html
css
youtube
communitycreator
RELATED COURSES

View all Courses

Keep Exploring