如果你看到YouTube的任何视频,https://www.youtube.com/watch?v=s8yznE7rkiM,当您重新调整页面尺寸时,视频播放器将根据宽高比而改变,而不仅仅是重新调整大小.这很有用,因为它不显示黑条.我的尝试并没有那么成功.
<style type="text/css">
#actualvid {
width: 100% !important;
height: auto !important;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<div id="actualvid">
<div id="ytapiplayer" style="width: 620px; height: 480px;" >
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var params = { allowScriptAccess: "always",allowfullscreen: "true" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/e/s8yznE7rkiM?enablejsapi=1&playerapiid=ytplayer?rel=0&autoplay=1&rel=0","ytapiplayer","640","390","8",null,params,atts);
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
}
function play(el,videoid) {
if (ytplayer) {
ytplayer.loadVideoById(videoid);
}
// reset background-color for all divs which has class video
$('.video').css('background-color','#222222');
$(el).css('background-color','#3A3A3A');
}
</script>
</div>
我尝试这样做的一种方法是将视频放入div并以这种方式进行：http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php然而,我无法让它工作.有人可以帮忙吗？我喜欢YouTube的方式,但似乎它根据窗口大小重新调整大小.
解决方法
这是一个只有CSS的解决方案：
.embed-container {
position: relative;
padding-bottom: 56.25%; /* 16x9 */
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class='embed-container'> <iframe src='http://www.youtube.com/embed/C0DPdy98e4c' frameborder='0' allowfullscreen></iframe> </div>
