Viewport dependent content

[CodeConvergence]

Hi,

A quick and possibly simple question.

I want to display different content depending on viewport size - image for mobile and video for everything else.
Now I could do this with css, maybe a possible twigification of wp_is_mobile() or perhaps with something like MobileDetectBundle (used in Symphony) but what is the bleech prefered method for Flynt?

Thanks!

[timohubois]

@CodeConvergence thanks you for the question. MobileDetectBundle and wp_is_mobile() seems to use HTTP_USER_AGENT to the detect the device, which is not related to the viewport size and they will run – without deeper customisations – only once, on page load.

When the visibility should change on the viewport size, I would prefer to do it with a media query and css.

May when GDPR is a goal, then it is a good solution to display the image as poster and load the video only after an explizit user interaction like in the Block Video oEmbed component. But be aware this is just a suggestion and not a bulletproof solution for all cases in relation to the GDPR.

Hope this helps?

[CodeConvergence]

Thank you Timo.
Using media queries was the way I went on this. Your comment on the GDPR was a good heads up too, although it doesn’t apply in this case, it was something I had not immediately considered.