1

Я пытаюсь встроить канал youtube в iframe, который я хочу использовать в дополнении Firefox.Вложение Youtube канала в панель дополнения firefox

Я получил этот код iframe от пользователей api youtube.

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

Это нормально работает, когда я проверяю его на обычной веб-странице. Но теперь я хочу использовать этот iframe в дополнении Firefox. Функциональность заключается в загрузке панели при щелчке правой кнопкой мыши, и панель будет содержать эту встроенную ссылку на 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 содержит код. Панель запускается правильно, но видео заканчивается в верхнем левом углу окна браузера, тогда как панель расположена справа внизу (панель отображается внизу справа с черным экраном, на котором должно быть видео). Я тестировал панель javascript с другими фреймами и отлично работает.

Не могу понять, почему просто youtube работает странно!

ответ

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

Затем IFrame YouTube кодируется как

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

Спасибо за обмен этого решения он помогает. – Noitidart

+1

Я добавил еще одно решение, которое может помочь. Надеюсь, это сработает для вас. – regstuff

Смежные вопросы