如何解决 youtube 播放器未显示全宽和全高的问题？答案

【问题标题】：how to fix issue with youtube player not showing up with full width & height?如何解决 youtube 播放器未显示全宽和全高的问题？
【发布时间】：2015-03-25 03:17:07
【问题描述】：

下面是我的代码示例，我尝试使用播放列表，其中播放器将处于全宽和全高状态，但由于某种原因它无法正常工作。所以我想要完成的是播放器将在整页上，没有其他任何东西。 example link 不会显示其他内容，这里是 link for fiddle，任何帮助将不胜感激。

复制代码

<html>
<head>


</head>
<body onload="load()" style="background-color:white">
<script type="text/javascript">
var playlisturl = "http://gdata.youtube.com/feeds/api/playlists/PL704DA9FE5E10160C?v=2";
var playlisturls = ["http://gdata.youtube.com/feeds/api/playlists/PL704DA9FE5E10160C?v=2"];
var pause_playlist_text = "Pause playlist (loop current video)";
var embed = true;
var autoplay = true;
var vwidth = 400;
var vheight = 500;
</script>

<script type="text/javascript" src="http://youtube-playlist-randomizer.valami.info/seedrandom.js"></script>
<script type="text/javascript" src="http://youtube-playlist-randomizer.valami.info/playlist2-min.js"></script>
<div id="control_buttons" style="display:none">
  <button style="display:none" id="nextbutton" onclick="next()">Play next</button>&nbsp;<span style="display:none" id="videosleft"></span>&nbsp;&nbsp;&nbsp;<button  style="display:none" id="previousbutton" onclick="previous()">Play previous</button>&nbsp;&nbsp;&nbsp;
  <button style="display:none" id="pauseplaylist" onclick="pause_playlist()">Pause playlist (loop current video)</button>  <button style="display:none" onclick="reshuffle()">Reshuffle</button>
</div>

<script type="text/javascript">
document.getElementById('pauseplaylist').style.display = "none"
</script>

<div id="video">
  <p>Loading playlist...</p>
</div>

<div class="videowrapper">
  <div id="myytplayer"></div>
</div>

<script type="text/javascript">

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var ytplayer;
function onYouTubeIframeAPIReady()
{
  ytplayer = new YT.Player('myytplayer', {
    height: vheight,
    width: vwidth,
    videoId: '8tPnX7OPo0Q',
    events: {
      'onReady': onYouTubePlayerReady,
      'onStateChange': onytplayerStateChange,
      'onError': onytplayerError
    }
  });
}
</script>
</body>
</html>

【问题讨论】：

标签： javascript html css youtube-api

【解决方案1】：

将容器的宽度和高度设置为 100%，检查一下：

#myytplayer {
    width:100%;
    height:100%;
}
.videowrapper {
    width:100%;
    height:100%;    
}

【讨论】：

【解决方案2】：

您好，您可以使用管状：http://www.seanmccambridge.com/tubular/ 由于tubing已经足够了，我提取了必要的代码为你。（以全宽和全高呈现视频，未拉伸，类似于 css 封面图像）

html代码：

<div id="player-container" style="overflow: hidden; position: absolute; width: 100%; height: 100%;">
            <div id="player" style="position: absolute">
</div>

这里有完整的 youtube API 封面样式内容，摘自管状。需要jquery。也是标准的 youtube html5 iframe api 必须包含代码 - 如此处给出： https://developers.google.com/youtube/iframe_api_reference#Getting_Started

 var ratio = 16 / 9;
 window.onPlayerReady = function (e) {
     resize();
 }

 $(window).on('resize', function () {
     resize();
 })

 var resize = function () {
     console.log("resize");

 var heightcorrection = 0,
         width = $(window).width(),
         pWidth, // player width, to be defined
         height = $(window).height() - heightcorrection,
         pHeight, // player height, tbd
         $videoPlayer = $('#player');        

     if (width / ratio < height) { // if new video height < window height (gap underneath)
         pWidth = Math.ceil(height * ratio); // get new player width
         $videoPlayer.width(pWidth).height(height).css({
             left: (width - pWidth) / 2,
             top: 0
         }); // player width is greater, offset left; reset top  

     } else { // new video width < window width (gap to right)
         pHeight = Math.ceil(width / ratio); // get new player height
         $videoPlayer.width(width).height(pHeight).css({
             left: 0,
             top: (height - pHeight) / 2 
         }); // player height is greater, offset top; reset left

     }

 }

【讨论】：