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

下面是我的代码示例，我试图使用播放列表，其中播放器将处于全宽和全高，但由于某些原因，它不起作用。所以我要做的是让球员在没有任何其他事情的情况下，能够站满全场。没有其他东西会出现在这里的示例链接是小提琴的链接，任何帮助都将不胜感激。

代码副本

<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>

使容器宽度和高度为100%，检查一下：

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

嗨，你可以用管状：http://www.seanmccambridge.com/tubular/由于管状非常普遍，我提取了必要的代码为你。（以全宽和全高呈现视频，而不是隐藏，类似于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
     }
 }

相关内容

最新更新

热门标签：