Question

我正在尝试在iframe中嵌入一个youtube频道，我想在firefox附加组件中使用它。

我从youtube api人那里得到了这个iframe代码。

<iframe width="375" height=230" src="http://www.youtube.com/embed/?listType=user_uploads&list=sadhguru&showinfo=0" frameborder="0"></iframe>

我在常规网页上测试时效果很好。但现在我想在firefox附加组件中使用这个iframe。该功能是在右键单击窗口小部件时加载面板，面板将包含此嵌入式YouTube链接。

这是面板代码

var Youtube = require("sdk/panel").Panel({
  width: 500,
  height: 525,
  position: {
  right: 0,
  bottom: 8
  },
  contentURL: data.url("Youtube_Iframe.html"),
});

这是小部件代码

var widget = require("sdk/widget").Widget({
  label: "Isha Blog",
  id: "Isha-Blog",
  contentURL: data.url("favicon-isha.ico"),
  contentScriptWhen: 'ready',
  contentScriptFile: data.url('widget.js')
});

widget.port.on('right-click', function() {
  Youtube.show();
});

这是用于解码右键单击的脚本文件。

window.addEventListener('click', function(event) {
  if(event.button == 0 && event.shiftKey == false)
    self.port.emit('left-click');

  if(event.button == 2 || (event.button == 0 && event.shiftKey == true))
    self.port.emit('right-click');
    event.preventDefault();
}, true);

我基本上是在右键单击时将面板的contentURL设置为data.url("Youtube_Iframe.html")，其中Youtube_Iframe包含嵌入代码。面板可以正常启动，但视频最终位于浏览器窗口的左上角，而面板位于右下角（面板右下方显示视频应为黑屏）。我用其他iframe测试了面板javascript，它运行正常。

无法弄清楚为什么youtube的工作很奇怪！

Answer 1

好吧我明白了。我使用了一种体型，然后应用了iframe，现在效果很好。

<body style="position:absolute; height:100%; width:100%; margin:2;">
    <iframe id="player" src="http://www.youtube.com/embed/?listType=user_uploads&list=sadhguru&showinfo=0?enablejsapi=1&html5=1"
    style="position:fixed; height:54%; width:100%; border:0;"></iframe>

我也尝试了另一种对我有用的解决方案。身体姿势是相对的。

body {
min-width: 480px; 
height: 600px;
max-width: 100%;
position: relative; margin:0;
vertical-align:middle;
}

然后youtube iframe被编码为

<iframe id="player" src="http://www.youtube.com/embed/?listType=user_uploads&list=sadhguru&showinfo=0?enablejsapi=1&html5=1" style="position:relative; height:45%; width:100%; border:0;"></iframe>

在Firefox附加面板中嵌入Youtube频道

1 个答案: