设置YouTube Iframe嵌入的最大尺寸

Question

因此，我希望将YouTube视频嵌入到我的网站上。以下代码效果很好，但扩展到响应性地填充宽度的100％，这在移动设备上很棒，但在桌面上太大。关于如何设置最大尺寸的任何想法？谢谢！

<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

在“ iframe” CSS文件中提供样式。

Answer 2

您是否尝试过使用媒体查询？此选项使您可以为每种类型的设备（手机，笔记本电脑等）设置不同的样式。

---

媒体查询[CSS]

要使用媒体查询，您必须在网页中包含此代码：

@media media-query {

   selector{property: value;}

}

有关媒体查询的更多信息，我建议您这些网站：

https://developer.mozilla.org/es/docs/web/css/@media

https：//www.w3schools.com/csssref/cssref/csssref/cssscs3_pr_pr_pr_mediaquery.asp

---

在这种情况

下，您应该设置“ iframe” iframe“ iframe”样式。 “并为这样的PC用户设置媒体查询：

iframe{width: 100%;}

@media only screen {

   iframe{width: 50%;}

}

值“屏幕”选择笔记本电脑和PC用户，因此只有在客户端位于这些类型的设备之一中，才能更改样式。

我希望这会有所帮助！