如果你看到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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。