Embed local video responsively

Support Content & Markdown
1

Hi all

Was hoping to get some help with a problem. I’ve searched the docs and web extensively but have been unable to find a solution.

Reletively new to building web pages but am really enjoying the experience of using grav, markdown came pretty quickly and am just starting to get my head around twig…

I’m currently trying to build my first real site having only used wordpress previously. It’s an education site using a mixture of media including slides, pictures ,locally and remote hosted video.

My only real issue so far is that I cant get locally hosted media, primarily video,to behave responsively over different devices and screen sizes.

This question has been asked a few years back but no solution was found. I was hoping someone might be able to help!

Thanks

Jack

2

Something like the second slide here? Check it’s holder div.swiper-video-container.video-local

3

@tokopah, Disclamer: I have no experience with embedding video at all…

Googling for video responsive returns as first hit the following article: Fluid Width Video

The article discusses issues with embedded videos and shows step by step how issues can be solved using a wrapper around the video element as pioneered by Thierry Koblentz.

The article also refers to FitVids.js, a js library that will add the necessary wrapper and css for you:

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

Hope this helps…

1 Like