search

pupunzi / jquery.mb.YTPlayer

use a custom yutube player for a video as background on jQuery framework
https://pupunzi.com/mb.components/mb.YTPlayer/demo/demo.html
1.3k stars 431 forks source link

YouTube Videos Appear Zoomed In or Size is too large #462

Closed ConwayStern1969 closed 3 years ago

ConwayStern1969 commented 4 years ago

I love the plugin. It came as part of a bootstrap template with a Hero video background. But the YouTube always appears zoomed in by about 20-30% it's as if the video is a lot larger than the container it's being played in.

Is there a setting in the JS or CSS that can control this?

stevegrant1983 commented 4 years ago

I love the plugin. It came as part of a bootstrap template with a Hero video background. But the YouTube always appears zoomed in by about 20-30% it's as if the video is a lot larger than the container it's being played in.

Is there a setting in the JS or CSS that can control this?

I found setting the optimizeDisplay option to false made it fit the container I was trying to use, but that was as an embedded video player of a live stream where I didn't want the actual YouTube stream to be easily obtainable.

The optimizeDisplay setting seems to basically set the underlying video player to be the size of the entire viewport, so if your hero block isn't full width, it'll appear zoomed.

alansaviolobo commented 3 years ago

+1 for optimizeDisplay = FALSE

pupunzi commented 3 years ago

@alansaviolobo The optimizeDisplay is an option that you can configure initializing the player. If you don't want it to be active just set it to false: data-property="{videoURL:'http://youtu.be/l_tHTmd5pgk',containment:'body',..., optimizeDisplay:false}">