YouTube如何创建流畅的视频播放器？ [英] How did youtube create a fluid video player?

问题描述

如果您看到任何YouTube视频的视频， https://www.youtube.com/ watch？v = s8yznE7rkiM ，当您调整网页的尺寸时，视频播放器将根据宽高比而改变，而不仅仅是调整大小。这是有用的，因为它不显示黑色条。

If you see on on anyone of YouTube's videos, https://www.youtube.com/watch?v=s8yznE7rkiM, as you re-size the dimensions of the page, the video player will change according to the aspect ratio rather than just simply re-sizing it. This is useful because it doesn't show black bars. My attempt at it was not as successful.

<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, 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的方式，但它似乎似乎根据窗口大小相应地调整大小。

One way I attempted to do this was to throw the video in a div and go about it this way: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php however, I was not able to get that to work. Can anyone help? I like the way YouTube did it but it seems as if it re-sizes accordingly to the window size.

推荐答案

这里是一个只有CSS的解决方案：

Here is a solution with only 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/s8yznE7rkiM' frameborder='0' allowfullscreen></iframe>
</div>

这篇关于YouTube如何创建流畅的视频播放器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！