CODEWITHSUNDEEP
html
user171780
user171780

Reputation: 3085

Define custom HTML elements

I am writing an HTML file and using a lot this:

<iframe src="blablabla" width=100% height=555 frameBorder=0></iframe>

Is it possible to somehow define myiframe such that I can set this width, height and frame border in the definition and then just do <myiframe src="blablabla"></myiframe> ?

Upvotes: 1

Views: 46

Answers (2)

Rounin
Rounin

Reputation: 29463

Is it possible to somehow define myiframe such that I can set this width, height and frame border in the definition and then just do <myiframe src="blablabla"></myiframe> ?

Yes, it is.

And though WebComponents are an incredibly powerful tool (and I very much hope they will continue to increase in popularity), in this situation you just need CSS:

Working Example:

.myiframe {
  width: 200px;
  height: 180px;
  border: 3px dashed red;
}
<iframe class="myiframe" srcdoc="blablabla"></iframe>

The simplest way to start with CSS is go to the <head>...</head> of your HTML Document and add the following, somewhere in the document head:

<style>

  .myiframe {
    width: 200px;
    height: 180px;
    border: 3px dashed red;
  }

</style>

Upvotes: 1

TechySharnav
TechySharnav

Reputation: 5084

Yeah, You can. These Custom Components are called Web Components. For More info, take a look at this. (To make things easy, you can switch to ReactJS).

But, In your case, Adding a CSS will apply the styling to every iframe element.

iframe{ width:100%; height:555px; }

Implementation (Put style tag after head tag) -

<style>
    iframe{ 
      width:100%; 
      height:555px; 
    }
</style>

<body>
 <iframe src="blablabla" frameBorder=0></iframe>
</body>

Upvotes: 2

Related Questions