1

我正在尝试达到与此网站类似的效果： http ://planilandia.com/index(en).html

看看视频——它们占屏幕的 50%，而且它们之间没有边框、边距或填充。我试图实现这一目标，但没有成功。这是我的小提琴：

http://jsfiddle.net/uceder23/3/

我做错了什么？

这是代码：

<div class="container section-movies">

        <div class="row row-no-padding movies-player">
            <div class="col-lg-6">
                <video controls class="home-video" poster="img/movies/about-us-poster.jpg" loop="true" preload="auto">
                              <source src="https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4" type="video/mp4" />
                </video>
            </div>
            <div class="col-lg-6">
                <video controls class="home-video" poster="img/movies/projects-poster.jpg" loop="true" preload="auto">
                              <source src="https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4" type="video/mp4" />
                </video>                        
            </div>
            </div>

            <div class="row row-no-padding movies-player">
            <div class="col-lg-6">
                            <video controls class="home-video" poster="img/movies/contact-poster.jpg" loop="true" preload="auto">
                              <source src="https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4" type="video/mp4" />
                            </video>
            </div>
            <div class="col-lg-6">
                            <video controls class="home-video" poster="img/movies/made-by-us-poster.jpg" loop="true" preload="auto">
                              <source src="https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4" type="video/mp4" />
                            </video>
            </div>          
        </div>
    </div><! --/container -->

和 CSS：

 .movies-player div {
    padding:0;
    margin:0;
    border:0;
    overflow:hidden;
}

.home-video {
    background-size: 100% 100%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;   
}

::-webkit-media-controls {
  display:none !important;
}

.row-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top:0 !important;
    padding-bottom:0 !imprtant;
    border:0!important;
  }

.section-movies {
    width:100%;
}

.section-movies .row {  
    text-align:center;
}

.section-movies .row div video {
    width:100%;
    margin:0;
    padding:0;
}

谢谢

4

1 回答 1

0

当然。您的 .col-lg-6 类没有样式。那是你行的一半。应该是50%；所以，

.col-lg-6 {
width: 50%;
float:left;
}

然后，视频元素应该是一个块，这样您就可以摆脱 annyong 较低的空白（如果它不是一个块，则在这里就像一个 img 元素）。一切都设置好了，虽然有些事情我从你的原始代码中不知道。

在这里分叉

http://jsfiddle.net/7kb9nfhn/2/

于 2015-04-04T23:24:51.807 回答