Question

我正在尝试创建一个响应式代码，以通过可点击链接从iframe和HTML 5视频中获得最佳效果。在我的设置中，我想编写一个内联@media查询以仅在大于375px时播放iframe，并且如果小于375px则在同一div块item white

中播放HTML视频

我被困在如何显示隐藏内容，而显示<video>

我的老板相信这是他想要做到的方式：S

@media only screen and (min-width: 375px) {
  div.video {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
  }
}

div.video>iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="item white">
  <div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/TIB3q68ZHYw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>


<div class="item white">
  <a href="https://www.walmart.com">
    <video width="100%" height="100%" loop autoplay muted preload="metadata"> . 
    <source src="https://player.vimeo.com/external/274117996.sd.mp4? 
    s=d8982e09554557a0a5db18f8c5d450252fbcddbc&profile_id=165" 
    type="video/mp4" />      
      
    Your browser does not support the video tag. I suggest you upgrade 
    your browser.
    </video>
  </a>
</div>

Answer 1

在CSS中，（最小宽度：500像素）表示高于500像素的任何内容都会触发低于该值的CSS。如果您改为说（max-width：500px），则表示任何低于499px的像素都会触发该像素以下的CSS。例如：

/* This will effect the class as long as the screen width is > 500px */
@media (min-width:500px) {
  .myContent {
    display:none;
  }
}

/* This will effect the class as long as the screen width is < 500px */
@media (max-width:500px) {
  .myContent {
    display:block;
  }
}

这有帮助吗？

Answer 2

一种方法是（如您所指出的）组合包含div的元素下的元素，并分别隐藏/显示内容（尽管此处包含div是没有意义的）。因此，在达到每个断点的情况下，iframe将被隐藏并显示视频（反之亦然）。

我无法播放您的mp4文件，因此我用一个示例代替了它，因为这可能会影响您和其他响应者的工作...

简单的CSS：

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

 @media only screen and (max-width: 375px) {
   #video {
     display: block;  
   }

   #iframe {
     display: none;
   }
 }

HTML：

 <div class="item white">    
   <div id="iframe">
     <iframe width="100%" height="100%" src="https://www.youtube.com/embed/TIB3q68ZHYw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
   </div>

   <div id="video">
     <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>
   </div>
 </div>

您可以在以下位置找到以下代码： http://jsfiddle.net/zh2b0n1e/

您将需要调整CSS样式元素以适合您的需要（填充，宽度，边框等）并改进HTML，但这是实现目标的一种简单方法。

使用@media查询隐藏和显示响应代码

2 个答案: