Video dimensions

[pleveque]

Hi, First, thank you for this plugin really good. I have been looking for a long time everywhere but I didn't find anything to fix my problem at this moment.

Framework : Laravel Actually, I use php-ffmpeg latest version to convert video and audio when users upload them on my website. I use plyr latest version to play video and audio. I use fancybox v3 to open and display theses medias according to the type (audio, video or image). I use the lastest version of JQuery.

My problem is : When I open video, iframe recover the botton of the video and I have to scroll to see the video controls like play and sound button. Image are displayed correctly. I can't fix a height because I have image audio and video in the same href.

As above I need to scroll down to see video controls, they don't displayed directly when iframe is open. At this moment my code to open iframe is only the basic code, I don't have added some css or elements because I tried before and nothing helped me.

If someone have an idea, please. If you don't understand or you have any question don't hesitate to ask me.

Thanks,

PS: Sorry about my language.

[fancyapps]

Hi,

You wrote so long description, but all I wish is that you would give a link to page demonstrating your issue.

[pleveque]

Hi, Sorry but I can't show examples. To be clear when I click on video,

<a data-fancybox data-type="iframe" data-src="/asset/1">video</a>

this one call another file which make a query to return the good video and displayed it in a iframe.

< video controls>
< source src="/asset/video1.mp4" type="video/mp4">
< /video>

Precision : Those are a local video (stored in database) I would like only my iframe resize automatically and correctly to the content within

[fancyapps]

Sorry, fancyBox has no (yet) built-in support for html5 videos.

I guess that your <video> element has no defined dimensions and then it will most likely be 100% window width/height. And therefore it will be a bit larger than available area and could cause scrollbars to appear.

So, you can either set some reasonable dimension to your <video> element or disable iframe preloading and adjust width/height of fancybox iframe using CSS or JS.

[pleveque]

Thanks to take of your time to help me.

I tried your idea. At this moment this is a better solution. I defined dimensions in px for my <video> element. I changed the maxWidth of the iframe in px because otherwise is not responsive.

Example :

$("[data-fancybox]").fancybox({
            preload : false,
            iframe : {
                css : {
                  maxWidth: '1280px'
                }
            }
});

< video controls style="width: 100% !important; height: 500px !important">
< source src="/asset/video1.mp4" type="video/mp4">
< /video>

At this moment this is fix my problem, but the fullscreen thanks to plyr is wrong.

Thanks again for your time and your help :)