How can I make the YouTube player scale?

Ken · 2016-07-25 03:04:37

I want to embed youtube videos on a Backlight page. This is easy to do, but the problem I run into is that the youtube player does not scale to a smaller size on small screens that are found on tablets/mobile devices. I did a google search and found two suggestions. Both involved using specific page html with a corresponding CSS script. I tried both approaches and none of them worked. The embedded youtube video plays, but does not scale to a smaller size when when viewed in a small browser window.

I assume the solution will be Backlight Theater (I thought I read somewhere that this is what Backlight stage will be called?), but until then I am looking for a temporary method. Any one found page html and a CSS script that will scale the youtube player?

Daniel Leu · 2016-07-25 06:04:47

It works for me using following CSS code on your media page:

.auto-resizable-iframe {
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
}

.auto-resizable-iframe iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

Ken · 2016-07-25 06:51:44

Thanks for the code. This works to resize one size smaller (not counting full screen). The youtube window resizes to a single smaller size when I reduce the browser size window. It will not go any smaller.

Do you know of a reliable Chrome or Firefox extensions that will let me set my browser window to standard pixel dimensions. I want to be able to check and see how my website including the media area will look on tablets/mobile devices.

rod barbee · 2016-07-25 07:14:06

In Chrome, you can right click on the page and choose "Inspect"
In the upper right of the page (or frame) that opens there's a little box. Click that and you get resizing options for all sorts of device sizes,

Actually, that little box might be there all the time. Not sure if you need a Chrome developer extension or not.

Daniel Leu · 2016-07-25 07:30:44

That's an extension, Rod. Ken, here is the link.

Ken · 2016-07-25 07:39:39

I don't have that little box, it might be one of the Chrome developer extensions. The "inspect" option works. So I can view at iPad size plus several iPhones.

I have added two videos to my media page, they both resize to a smaller size they will work in an iPad size display, which is good. However, when I view at various smartphone sizes, the media players are too large, they extend beyond the phones window.

Last edited by Ken (2016-07-25 07:42:04)

Daniel Leu · 2016-07-25 07:54:37

There is a small typo with the first video code

<<iframe

And your resize code is only active for bigger screens:

@media screen and (min-width: 1025px)

You are missing a closing bracket for the media screen settings at line 30 of your user.css. Most likely it should be placed just before the slideshow styling at line 40.

Ken · 2016-07-25 08:15:56

Daniel, thanks for spotting these. I left the resize code the same, but changed the other two items you pointed out. Now it works and resizes to fit iPhones.

The resize code was used for the background texture, so it would change to flat colors at a smaller browser window. Matt in another post said that Backlight did not work well with texture on small displays.

Last edited by Ken (2016-07-25 08:19:21)

Daniel Leu · 2016-07-25 08:21:40

Perfect! Nice video, btw.

Ken · 2016-07-25 13:25:27

Thanks for your help and appreciation.

I restructured the media section of my website so that the two videos are on their own hidden pages (not visible in the menu) and are accessed by clicking on thumbnail images in the Media page. It still needs a little more refinement, but it is getting closer.

Community @ The Turning Gate

#1 2016-07-25 03:04:37

How can I make the YouTube player scale?

#2 2016-07-25 06:04:47

Re: How can I make the YouTube player scale?

#3 2016-07-25 06:51:44

Re: How can I make the YouTube player scale?

#4 2016-07-25 07:14:06

Re: How can I make the YouTube player scale?

#5 2016-07-25 07:30:44

Re: How can I make the YouTube player scale?

#6 2016-07-25 07:39:39

Re: How can I make the YouTube player scale?

#7 2016-07-25 07:54:37

Re: How can I make the YouTube player scale?

#8 2016-07-25 08:15:56

Re: How can I make the YouTube player scale?

#9 2016-07-25 08:21:40

Re: How can I make the YouTube player scale?

#10 2016-07-25 13:25:27

Re: How can I make the YouTube player scale?

Board footer