javascript - 如何解决 youtube 播放器未显示完整宽度和高度的问题?

标签 javascript html css youtube-api

下面是我的代码示例,我正在尝试使用播放列表,其中播放器将处于全宽和全高状态,但由于某种原因它无法正常工作。所以我想要完成的是播放器将在整页上没有任何其他内容。什么都不会出现 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>

最佳答案

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

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

关于javascript - 如何解决 youtube 播放器未显示完整宽度和高度的问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29246830/

相关文章:

javascript - Angular2 阻止在指令中按下回车键时提交表单

javascript - 定期刷新 jQuery 中的 <img>

javascript - 我试图将一个类添加到某个 div,但它只是将其添加到具有此 ID 的 div 之一,为什么?

javascript - 如何将日期转换为时间

div 内链接之间的 Css 间隙

javascript - 在切换复选框时隐藏/显示列

java - JTextPane 垂直对齐文本和 <img> 图像与 html

android - HTML5 日期选择器仅在第二次点击时打开

css - IE8 中的 3d 按钮

html - 无法匹配 <div> 高度