使用iframe和javascript API制作youtube视频全屏

我有一个带有隐藏控件的嵌入式youtube视频：

<iframe id="ytplayer" type="text/html" width="400" height="225"
src="http://www.youtube.com/embed/dMH0bHeiRNg?rel=0&controls=0&showinfo=0
&loop=1&hd=1&modestbranding=1&enablejsapi=1&playerapiid=ytplayer"
frameborder="0" allowfullscreen></iframe>

像

player.playVideo（）

之类的东西工作得非常好。现在我正在寻找一种通过Javascript调用在全屏模式下播放视频的方法，但在API中找不到任何方法

---

是否可能（没有控件），如果可能，如何实现？

也许可以看看这个类似的问题。看起来这可能适合您（使用javascript全屏api而不是Youtube api）：

---

也许可以看看这个类似的问题。看起来这可能适合您（使用javascript全屏api而不是Youtube api）：

---

您可以尝试通过javascript将iframe维度设置为窗口维度

类似这样的内容（使用jQuery）：

---

我希望这能对您有所帮助。

您可以尝试通过javascript将iframe维度设置为窗口维度

类似这样的内容（使用jQuery）：

---

我希望这能对您有所帮助。

我在上的回答中添加了全屏（真正的全屏，而不是全窗口）的代码

---

YouTube不在其API中公开全屏，但您可以从YouTube API中的playerStateChange（）事件调用本机浏览器requestFullScreen（）函数，或者像我一样创建自己的自定义播放按钮

我在上的回答中添加了全屏（真正的全屏，而不是全窗口）的代码

---

YouTube不在其API中公开全屏，但您可以从YouTube API中的playerStateChange（）事件调用本机浏览器requestFullScreen（）函数，或者像我一样创建自己的自定义播放按钮

您可以使用html5全屏api：

node.requestFullScreen();
document.cancelFullScreen();
document.fullScreen; // bool

但请注意：

• 这通常需要特定于供应商的前缀，如

  mozRequestFullScreen（）

  或

  webkitRequestFullScreen

• requestFullScreen

  必须在用户事件（如onclick）上调用
• 在firefox中，全屏将为黑色，直到用户单击“允许”

---

您可以使用html5全屏api：

node.requestFullScreen();
document.cancelFullScreen();
document.fullScreen; // bool

但请注意：

• 这通常需要特定于供应商的前缀，如

  mozRequestFullScreen（）

  或

  webkitRequestFullScreen

• requestFullScreen

  必须在用户事件（如onclick）上调用
• 在firefox中，全屏将为黑色，直到用户单击“允许”

---

查看

iframe

播放器的API参考，我认为不可能将其设置为全屏（仅使用

iframe

API）ctrl f找不到全屏，因此它要么是隐藏在API中的秘密方法，要么不存在。但是，您可能知道，您可以设置播放器的大小

player.setSize（宽度：数字，高度：数字）：Object

，然后制作。

查看

iframe

播放器的API参考，我认为不可能将其设置为全屏（仅使用

iframe

API）-

ctrl f

找不到全屏，因此它可能是隐藏在API中的秘密方法，也可能不存在。但是，正如您可能知道的，您可以设置播放器的大小

player.setSize（宽度：数字，高度：数字）：Object

，然后使。您可以在此链接上找到更多详细信息：

---

这对我来说效果很好。您可以在此链接上找到更多详细信息：

---

“真正的”全屏是用Flash（或类似的东西）制作的。@Adriano Flash是没有必要的，全屏API已经存在，并且由除IE（10）之外的所有现代浏览器实现：@RobW nice，我不知道。很遗憾，如果没有IE（甚至10）的支持，使用它几乎是不可能的：（@Adriano这不一定是个问题。在可用时使用HTML5 API，必要时使用回退（如Flash）。@RobW对，我太容易沮丧了：）好吧，“真正的”全屏是用Flash（或诸如此类的东西）制作的…@Adriano Flash不是必需的，全屏API已经存在，并且除了IE（10）之外，所有现代浏览器都可以实现：@RobW nice，我不知道。很遗憾，如果没有IE（甚至10）的支持，使用它几乎是不可能的：（@Adriano这不一定是个问题。可用时使用HTML5 API，必要时使用回退（如Flash）。@RobW对，我太容易沮丧了：）我认为海报意味着真正的全屏，ie比窗口大。我认为海报的意思是真正的全屏，即比窗口大。我使用的是本机浏览器requestFullScreen（）函数，但youtube上的全屏按钮保持不变，这意味着当你点击时，它将全屏显示。关于如何将按钮从fullsize更新为close fullsize，您有什么想法吗？我使用的是本机的browser requestFullScreen（）函数，但是youtube上的全屏按钮保持不变，这意味着当您单击时，它将满屏显示。关于如何将按钮从fullsize更新为close fullsize有什么想法吗？PSA：注意

requestFullScreen

中的大写字母

S

，因为它已被弃用（但可能仍在firefox中），应该有一个小的

S

<代码>请求全屏。这花了我一段时间来计算输出sa：注意

requestFullScreen

中的大写字母

S

，因为它已被弃用（但可能仍在firefox中），应该有一个小的

S

<代码>请求全屏。我花了一段时间才弄明白，我认为和

.webkitRequestFullscreen

每个都有一个小写字母s。Moz是三峰骆驼。我认为和

.webkitRequestFullscreen

都有小写的s。莫兹是三峰骆驼。

node.requestFullScreen();
document.cancelFullScreen();
document.fullScreen; // bool

var player, iframe;
var $ = document.querySelector.bind(document);

// init player
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '200',
    width: '300',
    videoId: 'dQw4w9WgXcQ',
    events: {
      'onReady': onPlayerReady
    }
  });
}

// when ready, wait for clicks
function onPlayerReady(event) {
  var player = event.target;
  iframe = $('#player');
  setupListener(); 
}

function setupListener (){
$('button').addEventListener('click', playFullscreen);
}

function playFullscreen (){
  player.playVideo();//won't work on mobile

  var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(iframe)();
  }
}