4 replies to this topic

[Tone]

Eric,

Trying to figure out how to set the width and/or height of the various shadowbox variants to be a percentage of the overall screen size, while maintaining the proper aspect ratio of the video. The goal is to display a shadowbox (or other box) video that fills most of the display screen, regardless of the screen pixel dimensions, i.e. looks the same on a 640x480 monitor or a 1920x1080 high-def screen or an iPad, or whatever. I know that shadowbox natively supports sizing by percent, but TubePress strips % and px off the embedded width and height settings.

On a related note, the documentation says:

embeddedWidth      Horizontal size (in px) of embedded player    Any positive integer   [tubepress embeddedWidth="true"]

and the same for embeddedHeight.

Was wondering what the significance of the positive integer "true" is? All I get is a teeny little pop-up. I suspect this is a documentation issue, not a code problem.

TIA,

Tony

[eric]

Hi Tony,

Have you tried editing around this line: https://github.com/e...lo...box.js#L49 ? That's what I would recommend. You could hardcode a percentage in there. e.g.

Shadowbox.open({
   player:  'html',
   title:   videoTitleAnchor.html(),
   content: html,
   height:  '60%',
   width:   '90%'
});

I suspect this is a documentation issue, not a code problem.

Thanks for pointing that out that typo. Fixed now!

[Tone]

I realized that Shadowbox.js requires a hack to support percentages.

However, I found a nifty way to achieve the percentage sizing with jqModal that should survive normal TubePress upgrades without any re-editing.

For example, to get a window that is 80% of the width and height:

Add this CSS to my theme:

.jqmWindow {
   width: 80%;
   height: 80%;
   left: 10% !important;
   top: 10% !important;
   margin-left: 0px !important;
}

Notice that the top and left values are set to center the 80% window, i.e. 10%.

Then in Settings->TubePress-Embedded Player, set Max Width and Max Height to 100% (notice the % sign is included.) This allows the embedded YouTube content to fill the window defined by .jqmWindow CSS.

Works in Firefox, Safari, Chrome, and IE8. Still does weird stuff on iOS Safari.

BTW, thanks for the YouTube IFRAME upgrade. Awesome!!

[Tone]

Another approach that works well in 2.2.0 with FancyBox:

change code in fancybox.js:

/*		'height' 			: TubePressEmbedded.getHeightOfCurrentEmbed(galleryId) + 5,
		'width' 			: TubePressEmbedded.getWidthOfCurrentEmbed(galleryId) + 5, */

		'height' 			: '90%',
		'width' 			: '90%',

Set height and width to whatever percent you want.

I also like to add this line to fancybox.js, which makes the box follow the underlying page scrolling, rather than scroll off the top or bottom:

'centerOnScroll'		: true,

Then in TubePress Settings -> Embedded Player set:

Max height (px) 	100%
Max width (px) 	        100%

Works in Firefox, IE8, Safari, Chrome, and iPad Safari.

[e. p.]

looks like the informations contained in this thread are out of date

i'm using version 2.4.2 Pro and the directory structure of the plugin is changed

moreover putting 100% in Max width and Max height doesn't work anymore