3

I am developing an Android app for Amazon Fire Stick devices. I am using Cordova to create the Android wrapper around my web application which is loaded in an iframe. I am using javascript to embed youtube player as shown here.

Below is what my code to embed Youtube looks like:

var player = new YT.Player('youtube_container', {
    height: 720,
    width: 1280,
    videoId: 'some_video_id',
    playerVars: {
        autohide: 1,
        controls: 0,
        enablejsapi: 1,
        rel: 0,
        showinfo: 0
    },
    events: {
        'onReady': function () {
            player.seekTo(0, true);
            player.playVideo();
        },
    }
});

I have used this code to embed youtube videos in my web application for a long time now and it works without any problem but in Fire Stick devices the video shows up cut off as shown below. Video cut off.

The video is supposed to play in the rectangular section. The video does play but only the top left corner seems to be visible.

The strange thing is, it plays fine if I play it in full screen mode. It also plays fine in Fire Tablet devices whether it's full screen or not. Also, in my tests, I have found that the video is positioned correctly in the iframe in some rare occassions.

It seems similar to the issue described here, but no answer is marked correct and it has been 5 years since. I'm hoping someone has fixed this.

Any help will be appreciated. Thank you.

Edit: edited width and height value to reflect my actual code i.e. landscape

Suba S
  • 306
  • 1
  • 2
  • 12
  • `height` and `width` look backwards to me, unless you have a tall narrow video. – StackSlave Nov 04 '19 at 23:59
  • If I open the web app iframe in a browser the video plays just fine. And in rare occasions the video is positioned correctly even in Fire TV Stick. Also the same application (apk) show videos fine in Fire Tablet. – Suba S Nov 05 '19 at 00:01
  • Did you try it the other way? – StackSlave Nov 05 '19 at 00:05
  • Do you mean switching height and width? I did try that. When I do that the video does not play at all. It just shows empty box with black background. – Suba S Nov 05 '19 at 00:13
  • Try `width:720, height:405` instead. That would be 16 x 9, based on the width you want. – StackSlave Nov 05 '19 at 00:19
  • With the dimensions you mentioned it looks like this,( https://imgur.com/a/lrLaopo ). The box in the middle is a small cut off section of the actual video. Whereas standard dimensions like 1600 X 900, 1280 X 720, 1920 X 1080 loads as the screenshot in my post. – Suba S Nov 05 '19 at 15:40

0 Answers0