Html 使用媒体查询使iframe响应

我正在做一个在同一个div容器中同时显示html5和iframe的项目。此代码的预期用途是在我们的主页上显示移动版和桌面版的自动播放视频。该块小于桌面上的375px，由于移动限制，我们无法显示html5自动播放视频，因此我们将包括一个带有视频链接的iframe，移动块大于375px

在我的测试中，我已经得到了媒体查询，但我不知道如何使用相对位置和绝对位置方法使iframe位置响应

<style>
@media only screen and (min-width: 375px) {
#iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#iframe {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
 }
#video {
display: none;
}}
@media only screen and (max-width: 375px) {
#video {
 display: block;  
 }
#iframe {
 display: none;
 }
}
</style>

@仅介质屏幕和（最小宽度：375px）{
#iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
#iframe{
位置：相对位置；
垫底：56.25%；
身高：0；
}
#录像带{
显示：无；
}}
@仅介质屏幕和（最大宽度：375px）{
#录像带{
显示：块；
}
#iframe{
显示：无；
}
}

HTML:

<div class="item white">
<div id="iframe">
<iframe  src="https://player.vimeo.com/video/279740359" 
 width="320" height="240" frameborder="0" allowfullscreen="" >Browser 
 not compatible.
</iframe>
</div>
<div id="video"> 
<a href="https://www.shopbentley.com/en/back-to-school.html"> 
<video  width="100%" height="100%" loop autoplay muted 
 preload="metadata"><source 
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" type="video/mp4" />      
 Your browser does not support the video tag. I suggest you upgrade 
 your browser.
</video> 
</a> 

浏览器
不兼容。

---

链接到工作代码

我只需要修复选择器和容器：D

<style>
@media only screen and (max-width: 375px){

 .wrapper-with-intrinsic-ratio {
    position: relative;
    padding-bottom: 56.25%;
 }

.element-to-stretch iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

 }
 .video {
 display: none;  
 }
 }
 @media only screen and (min-width: 375px){
.video{display: block;}
.wrapper-with-intrinsic-ratio{display: none;}} 
</style>

@仅介质屏幕和（最大宽度：375px）{
.具有内在比率的包装器{
位置：相对位置；
垫底：56.25%；
}
.元素以拉伸iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.视频{
显示：无；
}
}
@仅介质屏幕和（最小宽度：375px）{
.video{显示：块；}
.wrapper，内部比率为{display:none；}}

HTML:

浏览器不是
兼容的。

具体问题是什么？iframe在桌面或移动设备上应该是相对的？我没有时间给出完整的答案，但如果您需要响应iframe，您可以在这里找到解决方案：----或在这里：。我以前使用过这些技巧使iFrame中的视频具有响应性。我已经使用了响应性代码，但我的问题是我需要同时使用媒体查询和响应性代码，但我很难在css中定位它

 <div class="item white">
 <div class="wrapper-with-intrinsic-ratio">
    <div class="element-to-stretch">
        <iframe  src="https://player.vimeo.com/video/279740359" width="100%" 
         height="100%" frameborder="0" allowfullscreen="" >Browser not 
         compatible.
        </iframe>
    </div>
</div>
<div class="video"> 
    <a href="https://www.shopbentley.com/en/back-to-school.html"> 
        <video  width="100%" height="100%" loop autoplay muted 
         preload="metadata"><source src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
 type="video/mp4"/>      

    Your browser does not support the video tag. I suggest you upgrade your 
     browser.
    </video> 
    </a>
    </div> 
</div>