7 days of unlimited WordPress themes, plugins & graphics - for free! Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. Web Components

How to Create a Web Component for Embedding YouTube Videos

Read Time: 6 mins

In the previous tutorial “How to “Lazy Load” Embedded YouTube Videos” we looked into how to load a Youtube video only when a user clicks it. This in turn helps our web page load a bit faster, especially if there it contains multiple Youtube videos.

If you followed the tutorial thoroughly, you’ll have seen that we had to add a couple of div elements, along with the classes, the styles, and the scripts to get it working.

Having to add all this each time is not the most convenient approach; what if we could replace all this by instead using an out-of-the-box element, like <youtube-embed> instead? That’s exactly what we are going to do in this tutorial; we are going to create a fully-functioning custom HTML element using “Web Components”. Check out the demo, then dive in!

shadow-root Read on to find out moreshadow-root Read on to find out moreshadow-root Read on to find out more
#shadow-root? Read on to find out more

A Quick Primer

Before getting your hands dirty, however, I highly encourage you look into one of Kezz Bracey’s fantastic tutorials, How to Create Your Own HTML Elements With Web Components. This will give you an insight into Web Components, and things like “Shadow DOM” (also known as “Shadow Root”), HTML Imports, and the <template> element.

Getting Started

To begin with, we need to create a new HTML file. We’ll name it “youtube-embed.html”. This file will contain all the code to register and build our new element, <youtube-embed>

It will include the following JavaScript, so let’s take a look at the bare bones:

Quite a few things, but numbered logically, so let’s take a look at what it does:

  1. Here we define two variables referring to two different “document” objects. The first variable, thatDoc, refers to the main document where we deploy the custom element. The second variable, thisDoc, is the document where we register our new HTML element, in this case, is youtube-embed.html.
  2. Next we define a variable to store the <template> element content (we will get into this matter shortly).
  3. We then create a new object based on the HTMLElement object. This will allow our new element to inherit methods and properties of any HTML element like idclassNameclientHeithscrollTop, and childeNodes.
  4. createdCallback is the function which will be immediately instantiated when the new element is created.
  5. Within that callback function we create the “Shadow DOM” which determines the shape of our custom element, <youtube-embed>, in the browser. We will also start writing a custom function in here.
  6. Finally we register our custom element in order for the browser to recognize it.

Importing HTML

Next, within the main document, where our videos will be embedded, we import the youtube-embed.html.

Web Components Polyfill

Web Components are a series of web technologies (Template, HTML Import, Custom Element, and Shadow DOM) put together. Some browsers like Opera and Chrome already support these features, but Firefox, Edge, and Safari have their own on views on supporting them, in that they only support them partially or not at all.

So, if you want your element to be applicable in a wide range of browsers (of course you do), you also need to load the Web Components polyfill.

Once we have done all these things and put the files in their place, we are now ready to add the other snippets of code to make our custom element come alive.

Bring the Custom Element to Life

To begin with, in “youtube-embed.html”, we add the <template> element. Then we nest the div and the styles that we created in our previous tutorial within it.

At this point, if we deploy our <youtube-embed> element and inspect it with Chrome DevTools, we will find the div elements and the styles we have just added now appear beneath the custom element Shadow DOM.

The Custom Element Shadow DOM Tree viewed in Chrome DevToolsThe Custom Element Shadow DOM Tree viewed in Chrome DevToolsThe Custom Element Shadow DOM Tree viewed in Chrome DevTools

Selecting a Shadow DOM Element

Going back to our JavaScript, we need to add the following code to select the video wrapper element from the Shadow DOM. Notice that we use querySelector() from our shadowRoot variable; this is the element where we will append the Youtube iframe later on.

Custom Attribute

In our previous tutorial, we used the data-embed attribute to pass the Youtube video ID. As a reminder, the ID is used to fetch the video image thumbnail and for pointing to the correct embedding URL of the video.

In the case of Web Components, a custom named attribute is acceptable. In this case, we can, for example, introduce an embed attribute.

Then within the createdCallback function we need to add the following to get the embed attribute value.

We will pass these two variables to our custom function.

Do the Thing

Maybe my head’s full, but I can’t think of a proper name for the function, hence doTheThing.

This function carries out the same line of codes that we added in our previous tutorial, albeit with a few adjustments. The function will show the Youtube video image thumbnail and append the Youtube video in the wrapper element, .youtube, upon the user click.

And we are all set! Check out the source code and the demo site.


In this tutorial, we have wrapped code from our previous tutorial into a Web Component. We are now able to embed a Youtube video more elegantly with our new custom element: <youtube-embed>, for example:

All the code (JavaScript, CSS, HTML) is encapsulated in separate HTML, preventing potential errors within that file breaking the entire site. And whenever we need to reuse it in other projects, we go ahead and import the HTML, youtube-embed.html.

youtube web component demoyoutube web component demoyoutube web component demo
Check out the demo on Github

Wrapping Up

This is just one example of how we can use Web Components. You can find more amazing implementations of Web Components on customelements.io. Lastly, I hope you enjoyed this tutorial and found it an easy-to-follow reference.

Further Resources

Did you find this post useful?
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.