[LucyKeileParticipant]

Hey Guys I added 3 images to be displayed on my mobile since the mp4 video won’t show.

1st is there any video tat will show as a video slider on mobile?

What do I have to do to make those images show up.
I can see my slider layers but no image. ( i do not want to see the slider layers)
Thank you!

Lucy

[LucyKeileParticipant]

This reply has been marked as private.

[FriechModerator]

Hi Lucy,

Thanks for writing in! Background video on mobile is disable by default, one reason for this is high data. Unfortunately, you can only select one video poster image, please remove the other two.

Hope it helps, Cheers!

[LucyKeileParticipant]

Cool! I have deleted the other two and works, but could please tell me what size this image should be I tried resizing to different sizes and still won’t work. I have read on other posts here that it should be the same as the video size because the theme is responsive it will resize for different screen sizes.

But, the image that I uploaded works on iPhone 6plus if I look in landscape mode, portrait the image gets very cropped.

How could I fix it?

Appreciate the help.

Lucy

[Paul RModerator]

Hi Lucy,

Upon checking, I can see you are no longer using xtheme.

http://screencast.com/t/5H2UeSu5KHM

Please activate your xtheme so we could help.

Thanks

[LucyKeileParticipant]

Sorry, Could not leave the site under maintenance yesterday. X is activated.

[ZeshanMember]

Hi Lucy,

Please try adding following CSS under Custom > CSS in the Customizer:

#big-video-image {
    max-height: 100%;
    max-width: 100%;
    left: 0 !important;
    top: 0 !important;
}

Thanks!

[LucyKeileParticipant]

Wonderful! It’s all good now.

Thank you guys!

Lucy

[FriechModerator]

Glad we could help, Cheers!

[LucyKeileParticipant]

After updating I see that the image I have replacing the video gets cropped on mobiles. The code you have told me to add is still there.

#big-video-image {
max-height: 100%;
max-width: 100%;
left: 0 !important;
top: 0 !important;
}

Can you please help me access this?

Also I don’t want my slider layers to show up on mobile I have made the changes into the revolution slider but the layers still come up on mobile.

Please help. My site is live now.

[ThaiModerator]

Hi There,

To hide the video background on mobile version, try adding following CSS under Appearance > Customize > Custom > CSS:

@media (max-width: 480px){
    div#rev_slider_5_1_wrapper {
        display: none;
    }
}

Hope it helps.

[LucyKeileParticipant]

I am confused now. I am not trying to hide the video background. Is it possible for the video background to show on mobile?

I was told it wasn’t possible there for I uploaded an image to replace on the home page. I want that image to display entirely.

so should I add this?
@media (max-width: 480px){
div#rev_slider_5_1_wrapper {
display: none;
}
}

Should I remove this:

#big-video-image {
max-height: 100%;
max-width: 100%;
left: 0 !important;
top: 0 !important;
}

[LucyKeileParticipant]

I added the code you told me.

@media (max-width: 480px){
div#rev_slider_5_1_wrapper {
display: none;
}

When you go to the site at first the image won’t display when you turn the phone to landscape more the image is there full size ( just how we would like) but if turn the phone to portrait the image get’s cropped again.

Same thing on the ipad. Also the layers from rev_slider still appears on mobile and ipad 🙁
Can you help please? 🙂

[RadModerator]

Hi Lucy,

Sorry for the confusion.

Videos are not “autoplay” on mobile, thus you can’t make it visible as background. To play video on mobile, it needs interaction from the user like tapping it. And there is no way to tap a background video 🙂

It’s mobile restriction, you don’t want to see your visitor charged by $$ just because your video played. In mobile, data charges are possible. And because of that, video background are hidden by default intentionally so you wont see a background video that has play icon that never plays.

Thanks for understanding.

[LucyKeileParticipant]

I got I uploaded a video poster :
Thanks.

[Author]

Posts