Setting a max size for a youtube iframe embed

Question

So I'm looking to embed youtube videos on my site. The following code works great, but expands to fill 100% of width responsively, which is great on mobile, but too large on desktop. Any ideas on how to set a max size? Thanks!

<iframe title="YouTube video player" src="https://www.youtube.com/embed/XXXXXXXXX?loop=0&amp;playlist=XXXXXXXXX" height="350" width="560" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" frameborder="0"></iframe>

Answer 1

Give style in the 'iframe' css file.

Answer 2

Have you tried using a media query? This option allows you to set a different style for each type of device (Mobile Phone, Laptop, etc.).

---

Media Queries [CSS]

To use a media query you have to include this code in your webpage:

@media media-query {

   selector{property: value;}

}

For more information about media queries I recommend you these websites:

https://developer.mozilla.org/es/docs/Web/CSS/@media

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

---

Solution

In this case, you should set a default style for "iframe" and set a media query for pc users like this:

iframe{width: 100%;}

@media only screen {

   iframe{width: 50%;}

}

The value "screen" selects laptop and pc users so you can change the styles only if the client is in one of these types of devices.

I hope this helps!