CODEWITHSUNDEEP
iframeyoutubefirefox-addonyoutube-apifirefox-addon-sdk
regstuff
regstuff

Reputation: 83

Embedding Youtube channel in a firefox add-on panel

I'm trying to embed a youtube channel in an iframe which I want to use in a firefox add-on.

I got this iframe code from the youtube api folks.

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

It works fine when I test it out on a regular webpage. But now I want to use this iframe in a firefox add-on. The functionality is to load a panel when a widget is right-clicked and the panel will contain this embedded youtube link.

Here's the panel code

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

Here's the widget code

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

And this is the script file for decoding right click.

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

I'm basically setting the contentURL of the panel to data.url("Youtube_Iframe.html") when right-clicked, where Youtube_Iframe contains the embed code. The panel launches all right, but the video ends up at the top-left corner of the browser window whereas the panel is positioned for the bottom right (The panel appears at the bottom right with a black screen where the video should be). I tested out the panel javascript with other iframes and it works fine.

Can't figure out why just youtube works weird!

Upvotes: 1

Views: 269

Answers (1)

regstuff
regstuff

Reputation: 83

Well I figured it out. I used a body style and then applied the iframe and it works fine now.

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

I also tried out another solution which worked for me. The body position is relative.

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

Then the youtube iframe is coded as

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

Upvotes: 1

Related Questions