Home page video on mobile phone

Hey siddhaonline!

Thank you for using Enfold.

Video background or slider is disabled on mobile devices by default for various reasons (compatiblity, performance, bandwidth etc.). You need to add a fall back custom background image in the slider.

Cheers!
Ismael

Hey!

You can add another video element with the same video url on top of the slider. We can force this video to only display on mobile devices. Use css media queries to hide or show an element. Please refer to these links for more info.

http://stackoverflow.com/questions/11796297/div-show-hide-media-query
https://kriesi.at/support/topic/how-to-hide-some-elements-in-mobile-version/#post-362263
https://kriesi.at/support/topic/is-there-an-option-to-create-a-separate-page-design-specific-to-mobile-devices/
https://kriesi.at/support/topic/displaying-another-slider-on-mobile-devices/
https://kriesi.at/support/topic/replace-slider-on-mobile/

Turn on the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Regards,
Ismael

Hey!

Yeah, sure. Please post the login details here. We’ll create an example in a test page. What you need to do first is to enable the custom css class: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

1.) Edit the current slider, look for the Custom CSS Class field at the very bottom of the slider options panel. Add a custom css class attribute, call it “hide-mobile” for example.

2.) Add another video element above or below the slider then add the url of the video, same video url in the slider, configure the options etc. Again, look for the custom css class attribute, this time use “hide-desktop”.

3.) Save the page then go to the Quick CSS field. Use this:

@media only screen and (max-width: 989px) {
.hide-mobile { display: none; }}
@media only screen and (min-width: 990px) {
.hide-desktop { display: none; }}

You should have an automatic video slider on desktop view and a video element that users can watch on mobile.

Regards,
Ismael

Hi!

Please remove browser cache then reload the page: http://smritiyoga.com/

http://smritiyoga.com/wp-admin/post.php?post=1691&action=edit&message=1

Best regards,
Ismael

Hey Sid

Please try using this plugin – https://wordpress.org/plugins/hide-youtube-related-videos/
We do not charge for the support we provide :)

Cheers!
Yigit