Forum | Appery.io

I've followed these instructions to embed a youtube video
http://docs.appery.io/documentation/b...

changing the last bit to .appendTo('.ui-content'); per a suggestion on this forum, but

But this assumes known dimensions for width and height and one size does not fit all on mobile.

How do I embed a youtube video so that the player is full screen on all devices?

I have tried using this:
https://github.com/davatron5000/FitVi...

as a user defined external resource (downloaded to my web server) and

$('.myFrame').fitVids(); or $('.ui-content').fitVids();
in an OnLoad before (or after) the youtube embed code from the sample. No love.

Hello!

1) Create New JS asset with code from https://raw.github.com/davatron5000/F...;
2) Add on page HTML component with name panelName;
3) Add Button;
4) On Click event add Run JS with the following code:

preAppery("panelName")&#46;html('<iframe width="425" height="349" src="http:&#47;&#47;www&#46;youtube&#46;com&#47;embed&#47;FKWwdQu6_ok" frameborder="0" allowfullscreen><&#47;iframe>');
$('&#46;ui-content')&#46;fitVids();/pre

Thank you Alena, that is helpful.

It scales to full width now, but the height does not scale properly in landscape views. But that would seem to be an issue for FitVids, as it is clear your code is working!

Thanks again for your help.

Could you provide more details in your steps I am confused.

Hello Robert! What did you try and what is not clear?

1) Create New JS asset with code from
How do you create a new js asset?
2) Add on page HTML component with name panelName;
I see how I can add an html box to my UI, but what is the purpose of this and what do I do with it?
4) On Click event add Run JS with the following code:
I assume you set this event to run when clicking on the button added in step 3.

1) Create New- JavaScript- Create JavaScript
2) You refer to HTML component when do Run JS
4) Yes, you are right

Lol, I apologize. I have figured out step one and created the java script code. But step 2 still has me confused, what do you mean by refer to the html component?

Ok, I figured out step two now actually. But when I click my button my video shows in the html space, but it has scrollers to each side I thought that this setup would make it default to full screen.

Hello! In code pre"http:&#47;&#47;www&#46;youtube&#46;com&#47;embed&#47;FKWwdQu6_ok" frameborder="0" allowfullscreen><&#47;iframe>');/pre please check $('.ui-content').fitVids(); - parameters width="425" height="349" should be the same as html component Dimension (Dimension should be set in px)