Skip to main content

FluentCommunity

#Bug Report

FluentPlayer not working with embedded vertical videos

Hi!

I've been trying to use FluentPlayer to show all the existing embedded video in fluent community (both from YouTube and Vimeo) and it turns out it doesn't work: it shows the video in horizontal form but instead of embedding the whole from top to he bottom adding extra blurred bands on the border, it enlarges the video to full length so the only a small part on the bottom of the original video is shown.

I hope it's clear, otherwise please let me know and I'll add a screenshot.

Thank you,

Giorgio

  • 2 likes
  • 3 comments

Tawsif Ahmed Riyad

Forwarded the post to our FluentPlayer team. Thank you for reporting.

Claudy Scoufy

Giorgio Luciani Tawsif Ahmed Riyad 
The solution I use (a bit of a hack lol) is to add PHP code via fluentsnippet and CSS in the custom CSS.

add_filter('fluent_community/feed_item_content', function($content) {
    $portrait_platforms = [
        'facebook.com/reel', 
        'facebook.com/watch', 
        'tiktok.com', 
        'instagram.com/reels', 
        'instagram.com/reel',
        'youtube.com/shorts'
    ];

    foreach ($portrait_platforms as $platform) {
        if (strpos($content, $platform) !== false) {
            $content = '<div class="fc-custom-portrait-mode">' . $content . '</div>';
            break;
        }
    }
    return $content;
});

CSS

.feed_media_ext_video iframe[src*="height=476"] {
    display: block !important;
    margin: 0 auto !important;
    max-width: 267px !important; 
    width: 100% !important;
    aspect-ratio: 267 / 476 !important;
    height: auto !important;
    border-radius: 8px;
}
.feed_media_ext_video {
    display: flex !important;
    justify-content: center !important;
    background-color: transparent !important;
}

1.00

Giorgio Luciani

Claudy Scoufy thank you very much Claudy, I'll check it out