Skip to content

Instantly share code, notes, and snippets.

@norewp

norewp/vid-bg-mob.css

Last active December 9, 2017 21:39
Show Gist options
  • Save norewp/64bc514bd4a6d7e9649bd1e31b585d14 to your computer and use it in GitHub Desktop.
Save norewp/64bc514bd4a6d7e9649bd1e31b585d14 to your computer and use it in GitHub Desktop.
Download ZIP
Render background video on mobile view
Raw
vid-bg-mob.css
/*
* In the section which you have the video background add something like el-show-video-mobile to the CSS ID field
*
* Then apply this CSS rule in the Custom CSS box and you should have the background video showing on mobile
*
* NOTE: The class elementor-hidden-phone is hardcoded in Elementor Section's rendered output & this hack only overrides the CSS rule set on it.
*/
@media (max-width: 767px) {
body:not(.elementor-editor-active) #el-show-video-mobile > .elementor-background-video-container.elementor-hidden-phone {
display: inline-block; } }
@norewp
Copy link
Author

norewp commented Dec 9, 2017 •
edited
Loading

You can change the CSS ID to something unique to your template/site :)

When using this code do remember why it was to hidden in the first place - use sparingly and give consideration to your mobile users 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment