Question

我正在尝试并排制作两个 iframe 视频（对于 PC 用户）和一个在另一个上方（对于手机用户）。
我已经尝试过这个，它适用于手机，但对于 PC 来说，它们仍然在彼此之上，而不是我需要的并排。
对于 Css：

<style> 
.embed-containerr {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-bottom: 1em;
}

.embed-containerr iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

</style>

对于 html：

<center><div class="containerr-fluid">
        <div class="col-sm-6">
                <div class="embed-containerr">
                  <iframe src="https://www.youtube.com/embed/xbzX99Iy7xg" frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="embed-containerr">
                  <iframe src="https://www.youtube.com/embed/BfmfZw_NIYg" frameborder="0" allowfullscreen></iframe>
                </div>
        </div>
    </div></center>

Answer 1

如果你把它放在他们之间，我认为它应该做你想做的。不过，可能有一种更简单的方法可以做到这一点。

<div class="mobileShow">
<br>
</div>

<style type="text/css">
  .mobileShow {display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }
</style>

Answer 2

我找到了这个，并解决了我的问题

<div class="vimeo-wrapper clearfix">
        <div class="vimeo-video-1 vimeo-standard">
                              <iframe src="https://www.youtube.com/embed/xbzX99Iy7xg" frameborder="0" allowfullscreen></iframe>

        </div>
        <div class="vimeo-video-2 vimeo-standard">
                              <iframe src="https://www.youtube.com/embed/BfmfZw_NIYg" frameborder="0" allowfullscreen></iframe>

        </div>
    </div>

 .vimeo-wrapper {
        max-width: 980px;
        position: relative;
        margin: 0 auto;
    }

    .vimeo-standard {
        float: left;
        height: 300px;
        width: 47%;
        margin: 10px;
    }

    iframe {
        width: 100%;
        height: 100%;
    }


    @media (max-width:767px) {

        .vimeo-standard {
            float: none;
            width: 80%;
            margin: 0 auto;
            padding-bottom: 10px;
        }
    }

    .clearfix:before,
    .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    .clearfix:after {
        clear: both;
    }

http://jsfiddle.net/Ahj6h/

并排响应两个 iframe 视频

2 个答案: