我正在尝试并排制作两个 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>
答案 0 :(得分:0)
如果你把它放在他们之间,我认为它应该做你想做的。不过,可能有一种更简单的方法可以做到这一点。
<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>
答案 1 :(得分:0)
我找到了这个,并解决了我的问题
<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;
}