2015-10-19 115 views
1

如何使Youtube视频在DIV容器内100%播放。在Div容器内播放视频100%

宽度的div:940px

格的高度:400像素

Fiddle here

<div class="videojs-wrapper"> 
    <div class="video-js-player"> 
     <video id="vid1" src="" class="video-js vjs-default-skin" autoplay="autoplay" muted loop preload="auto" width="100%" height="400px" data-setup='{ "techOrder": ["youtube"], "src": "http://www.youtube.com/embed/5PaIjFd02js?enablejsapi=1" }'> 
     </video> 
    </div> 

</div> 


.video-content { 
    width:100%; 
    height:300px; 
    background:#f2f2f2; 
    font-size:18px; 
    font-family:verdana; 
    font-weight:bold; 
    color:#aaa; 
    border:1px solid #aaa; 
    margin-top:10px; 
} 
.videojs-wrapper { 
    position:relative; 
} 
.video-js-play { 
    position: absolute; 
    top: 0; 
    background-color: #fff; 
    padding: 10px; 
    right: 47%; 
    left: 44%; 
    width: 100px; 
    bottom: 0; 
    top: 40%; 
    text-align: center; 
    height: 36px; 
} 
.video-js-player { 
    position:relative; 
} 

回答

0

我认为你可以这样做:

.video-js-player { 
    position:relative; 
    width:940px; 
    height:400px; 
} 

.video-content { 
    width:100%; 
    height:100%;//Change this to also 100% 
    background:#f2f2f2; 
    font-size:18px; 
    font-family:verdana; 
    font-weight:bold; 
    color:#aaa; 
    border:1px solid #aaa; 
    margin-top:10px; 
}