Better video sizing

[tupacan]

Is your feature request related to a problem? Please describe.

Yes, it's related to controlling the size of an HTML5 video when using Fancybox. I couldn't find a way to set a desired video size via data attributes.

Specifically, I want the video to maintain a 1:1 aspect ratio, with both the width and height around 1000px. No matter what I do, the video height seems to be locked at 526.5px with an inline CSS. I tried using data-width and data-height, but they didn't have any effect. Also tried removing the data-aspect-ratio, still no effect on the width and the height.

I ended up fixing it with CSS, but had to use !important to override the inline styles. It would be great if there was clearer option for achieving this with data attributes.

Describe the solution you'd like

I'd like to see support for setting video size (width and/or height) through data attributes, just like data-video-ratio. This would let users define custom dimensions for HTML5 videos without needing CSS overrides, giving better control directly in the HTML.

Describe alternatives you've considered

As mentioned, I've solved the issue with CSS by overriding the inline styles, which worked but feels like a workaround rather than a clean solution. Ideally, data attributes like data-width and data-height should handle this directly.

Additional context

Here’s the HTML snippet I used:

<a href="video_url" data-fancybox data-video-ratio="1/1" data-width="1000" data-height="1000">

Thanks for your time!

[fancyapps]

Hi. Sorry, videos have max dimension 960px X 540px and you can use this CSS snippet to remove that limitation:

.has-youtube .fancybox__content, 
.has-vimeo .fancybox__content, 
.has-html5video .fancybox__content {
  width: 100%;
  height: 100%;
}

Demo - https://jsfiddle.net/f8ey7nmt/

[tupacan]

Hi. I see, thanks for the reply.

The snippet helped, but it would be nice if the user can set these values via data attributes.