Video background doesn't play on mobile

takamineman · December 2015

I've set up a video background for my home page that you can see here: http://www.basiccon.org

To do this I used the code:

[vc_row full_width="stretch_row" full_height="yes" video_bg="yes" video_bg_url="

" css=".vc_custom_1450212639822{margin-bottom: 0px !important;background-color: #020a04 !important;}"][/vc_row]

However, the video won't play on mobile. It has the thumbnail with a button to play it, but the button will not activate the video. I'd like the video to just play automatically. How can I fix this?

Albert · December 2015

Hi,

on which page you used this shortcode?

takamineman · December 2015

I used it on my home page. The one that I gave the link to.

Albert · December 2015

Ok, we thought that you meant other page. We did checked your page but we did not noticed anything wrong. Did you tried to switch to default WP theme and check if this shortcode works with default one? If not, please do this and let us know.

takamineman · January 2016

Sorry I'm just replying to this. I've been on vacation. If I switch to the default theme will I lose all the work I've done on the betheme already?

Albert · January 2016

Hi,

If you switch it just to check something then no, but if you save page created with betheme using another theme you may loose some data

Thanks!

takamineman · January 2016

Ok, I decided to try building this in the muffin builder instead. So, I've got it set up as a video item. You can see what it looks like. It now plays on mobile, but I'd like to be able to have it autoplay on mobile and would prefer it to play in the window of the webpage instead of opening up in its own window like most videos do on mobile.

Also, how can I force it to be the full height of the window on desktop like I had it before?

Albert · January 2016

Each device have own system for videos and that's why videos can not auto play. But the video proportions can not be changed unfortunately because YT videos height adjust automatically to it's width. This is the reason why this can not be changed unfortunately.

takamineman · January 2016

Ok, so I went back to the original code I was using to make it full screen. Is there any way I can hide the video on mobile and put something else like an image in its place?

Albert · January 2016

What you can do is display different sections on different devices. Inside section you can find "Responsive Visibility" option which is responsible for hiding/displaying sections per devices and that's all we can recommend.

takamineman · January 2016

The problem with that is that this code I'm using won't work inside of a code element in the muffin builder. Is there any code I could put in the standard text editor to tell it to display only on desktop?

Albert · January 2016

We suggest to read the doc http://themes.muffingroup.com/betheme/documentation/ where all items has been explained. The CODE item is for presenting the code, not parsing it. If you want codes to be parsed, you supposed to use COLUMN item instead.

takamineman · January 2016

Thanks for the clarification. I was able to put that code into a column item and set the section to hide on tablet and mobile. I've set the responsive visibility to hide on tablet & mobile, but it still shows up in landscape on tablets. Any thoughts on that?

Albert · January 2016

What is the size (width in px) of your landscape tablet?

takamineman · January 2016

I was testing on an iPad mini 2 so it has the 2048×1536 display.

takamineman · January 2016

Also, is there a way to remove the extra padding below the logo on mobile and make the menu bar stretch across the width of the browser? There's extra space below the logo and then extra gray space on either side of the menu bar. I'd prefer that it be all black across the top and have no space below it.

You can see what I mean from this screenshot: http://pasteboard.co/IrvN0IS.png

Albert · January 2016

We are asking about the width, not dimension.

However, to remove that extra padding below the logo, please turn ON Top Bar Right option under Theme options > Header & Subheader > Extras section.

takamineman · January 2016

I'm not seeing that option for Top Bar Right under the Extras section. As far as the width of the iPad Mini 2 it is 1025px.

Albert · January 2016

If you don't see it, please update theme to recent version then or use the following css to remove that section:

#Top_bar .top_bar_right { display: none !important; }

takamineman · January 2016

Ok, I'm all up to date and that css fixed the space below the logo, but what about the space on either side of the menu bar? If you look at the picture I posted above you can see gray on either side and it would be great to remove that on mobile if possible.

Albert · January 2016

To remove those grey spaces on the sides, please use extra css:

@media only screen and (max-width: 767px) {
    #Header_creative #Top_bar { margin: 0 !important; width: 100% !important; }
}

takamineman · January 2016

Ok, is there any way to display the logo/menu bar a little larger on mobile?

Also, you didn't address how to fix that video element from showing up on the iPad in landscape. The width is 1025px. I've set the section settings in the muffin builder to hide on tablets and mobile.

Albert · January 2016

To increase logo and header on mobile, you can use:

@media only screen and (max-width: 767px) {
    #Header_creative #Top_bar .logo #logo img { max-height: 100px !important; }
    #Header_creative #Top_bar #logo { height: 100px !important; }
    #Header_creative #Top_bar { height: 120px !important; }
}

In reference to 2nd question, we don't get it. Please send us screenshot of what you mean + also provide the link to page where you got a problem.

takamineman · January 2016

I like the size of the logo and menu bar now, but that causes the menu dropdown to overlay the webpage without any background. You can see what it looks like here: http://pasteboard.co/LxMkoq1.png

For the 2nd question I've got a video element that I've put in a column item. It plays the video fine on desktop with the code I've used, but not on tablets or mobile. So, I've set the section to display only on desktop and then used another section to display a picture only on tablet or mobile. You can see the page here: http://www.basiccon.org/

It works correctly on mobile, but on some tablets when you go to landscape (such as the iPad Mini 2 with width of 1025px) it still displays the video that won't work on tablets. Here's a screenshot from the iPad Mini to show you what I mean: http://pasteboard.co/LxZvBgo.png

I would like it to instead display the picture you see on mobile when the tablet is in landscape. You can see that picture in the first screenshot I added above where the menu dropdown is overlaying it.

Albert · January 2016

1. If you don't like how above css works, then unfortunately we do not have any other solution for this.

2. Ok, we understand what you mean. However, at this moment we do not have any option to change this behave. We will consider this while updates but first we must finish a long "to do" list.

KINVENT · January 2020

Hello, my background video landing page in www.k-invent.com doesn't play on mobile. I tried the solutions mentionned here but it's not working eather. Can you help me please ?

Bryan · January 2020

KINVENT

Hey,

the background video for sections in the muffin builder will not work on mobile. You would have to use Revolution Slider for example.

thanks

KINVENT · January 2020

Hey,

You just saved me, this is perfect with Revolution Slider !

Thanks for support !

Video background doesn't play on mobile

Comments