youtube视频完整的部分

Question

我有youtube视频链接

<iframe width="100%" height="100%" src="//www.youtube.com/embed/zuQGx1H1Qh8?autoplay=1"  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen ></iframe>

我希望将其全部显示在我的标签中。我添加了width:100% height:100%，但结果是：

其他我试过

bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 100;

但结果相同。知道如何解决这个问题吗？

JSFIDDLE

Answer 1

从您的部分代码中删除padding: 60px;和padding-left: 120px;并解决该问题

Answer 2

解决方案＃1

删除填充：http://jsfiddle.net/mwykdrn3/1/

section {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

解决方案＃2

使用绝对定位http://jsfiddle.net/mwykdrn3/2/

#yvideo {
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}