Self-Hosted Vertical Video

Resolved risktwo
(@risktwo)

1 year ago

Are vertical videos supported for self hosted videos? As of now the video player shows the videos horizontally during the pop up.

Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)

Thread Starter

(@risktwo)

I realized that it was an issue with my theme. In the CSS the ‘object-fit’ was set to ‘cover’, I switched it to ‘contain’ and the vertical video works now. However, the player shows black bars on both sides.

For self-hosted videos is it possible to load the pop-up videos without the black bars like the youtube shorts video in the demo?

Thread Starter

risktwo

(@risktwo)

1 year ago

Here’s what finally worked for me.

CSS:

/*       Custom CSS         */ 

/* 🎥 Ensure Fancybox Video Displays Properly */
.fancybox-content {
    width: auto !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.9) !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
}

/* 📺 Fix Video Visibility & Black Bars */
.fancybox-video {
    width: auto !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain !important;  /* 🚀 Keeps aspect ratio, removes bars */
    display: block !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* 🔧 Fix for Fancybox Slide */
.fancybox-slide--video {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* 🛠️ Special Fix for Vertical Videos */
.fancybox-video[style*="height"] {
    width: auto !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
}

/* 📱 Mobile Fixes */
@media (max-width: 768px) {
    .fancybox-content {
        max-width: 100vw !important;
        max-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .fancybox-video {
        width: auto !important;
        height: auto !important;
        max-width: 90vw !important;
        max-height: 90vh !important;
        object-fit: contain !important;
        display: block !important;
    }
}

/* 📲 Tablet Fixes */
@media (max-width: 1024px) {
    .fancybox-video {
        width: auto !important;
        height: auto !important;
        max-width: 90vw !important;
        max-height: 90vh !important;
        object-fit: contain !important;
        display: block !important;
    }
}

JS:

$(".fancybox").fancybox({
    width: "90%",
    height: "auto",
    autoSize: true,
    aspectRatio: true,
    iframe : {
        css : {
            width: "90%",
            height: "auto"
        }
    },
    video : {
        tpl:
            '<video class="fancybox-video" controls>' +
            '<source src="{{src}}" type="video/mp4">' +
            'Your browser does not support the video tag.' +
            "</video>"
    }
});

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Self-Hosted Vertical Video’ is closed to new replies.