Which is the best way to add html5 videos and audios to a Flarum post?

nitaaikumar

I self-host my videos and audios to provide the best audio quality in the videos. I installed the FriendsOfFlarum Formatting extension and activated HtmlEntities but still it does parse the html5 video and audio codes. On Xenforo, I has made Custom BBcode for these. Any ideas please how can I do this on Flarum? Many thanks in advance.

datitisev

nitaaikumar I think the Autovideo plugin that you can enable through fof/formatting should auto-embed videos. For audio, I think @010101's SM2 extension is the only option that is publicly available.

nitaaikumar

datitisev Thanks so much, tried Autovideo. It worked. But the video is getting cut in width on the right edge. I have 1080x1920 portrait videos and 1920x1080 landscape videos. Landscape videos are getting cut in mobile resolutions and portrait video is always getting cut on the right even on desktops. Please make them responsive. Also if you can add Autoaudio with a normal full control html5 audio player. I can donate for the time which we wil be needed to make them responsive and for autoaudio. It will be useful for all Flarum users who self-hosted videos, especially now that dedicated servers are not so costly. Will try the SM2 now. Thanks for that too.

010101

BBBBcode includes an audio BBcode which will use the browser’s standard HTML5 audio player. It’s not compatible with my SM2 extension though so don’t try both at the same time.

Of course with BBBBcode you get other BBcodes that you may not want. But I can make a new extension later this week which could include a BBcode for HTML5 audio and a BBcode for HTML5 video. I should have time in a day or two.

nitaaikumar

010101 I have no words how to thank you. I will donate for your time to do this. Please make them both responsive for all devices for landscape and portrait videos. Thanks so much again. If @datitisev can kindly fix his one for responsive video and add autoaudio, it would be wonderful too.

010101

nitaaikumar After thinking about this more, I don’t think I would create a video BBcode. The reason is because the Friends of Flarum formatting extension handles auto embedding video already and it is faster than a BBcode. All you have to do is paste the URL. If I created a new BBcode it would conflict with the formatting extension most likely. Which wouldn’t be great since I’m sure most Flarum forum owners use the formatting extension.

With a small snippet of CSS, you can make the videos embedded by the formatting extension responsive. You can add this in your admin appearance area within the custom CSS box:

video {
width: 100%;
height: auto;
}

That’s all folks!

@datitisev, maybe you can add/edit the CSS in the formatting extension to include this? I tested on my forum with an iPhone; it works great. Probably anything that the formatting extension auto embeds needs a 100% width if it doesn’t have that already.