使用php文件在wordpress中以移动模式调整视频大小

Question

<div class="container" style="text-align: center"><iframe width="100%" height="450" src="https://www.youtube.com/embed/6c7Fx2PR9Dk" frameborder="0" allowfullscreen></iframe></div>

我将上面的代码插入到wordpress的frontpage.php中，以添加嵌入的YouTube视频。但是，我想在从移动模式查看网站时编辑视频播放器的高度。我尝试在媒体查询中添加.container {height：250px！important;}，但这并没有改变任何东西。我想知道如何更改容器大小，以便我可以将高度设置为自动或将代码添加到媒体查询以更改视频播放器大小。本网站可在beautyinstitute.us上查看

我也试过

@media screen and (max-width: 799px) {
 .container .iframe{height:250px !important;}}

在responsive.css中

Answer 1

iframe是一个html元素，而不是一个类。所以将其定位为

.iframe

不起作用。试试这个：

.container iframe {height: 250px;}

Answer 2

WordPress可以检索视频的宽度/高度并生成iframe代码。

<?php
echo apply_filter('the_content', 'https://www.youtube.com/watch?v=6c7Fx2PR9Dk');
?>

如果您想要自适应视频，请尝试使用jQuery插件Fitvids.js。