Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 2, 2021 at 1:42 pm #1303584
    Munford

    Hi – a couple issues:

    I have a fullscreen slider with a Vimeo video, looks fine on the PC but on mobile the controls aren’t visible – just the fallback image, and when I click it opens the video in a lightbox. I add a video element underneath, but it’s not stretching fullscreen (due to some “width: 85%” css that I’m using to make sure there’s a bit of space on the side of my content in certain areas). https://imgur.com/9LdSKBN
    Can you give me a way to either show the controls on the mobile slider, or make the video element fullscreen?

    Also, on the PC, the controls don’t allow for scrubbing forward in the video – can that be enabled?

    Maybe related issue, I need my mobile header to be 100% width instead of 85% like it is now: https://imgur.com/P6V64s9
    I need it like this so the logo is all the way at the left: https://imgur.com/fvhGzuP

    thanks
    Nancy

    • This topic was modified 3 years, 5 months ago by Munford.
    June 6, 2021 at 7:05 pm #1304286
    Mike

    Hey Munford,
    Sorry for the very late reply and thanks for the link to your page.
    To set the header and the mobile video to 100% please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
.responsive #top.home #wrap_all #mobile > .container,
.responsive #top #wrap_all #header_main > .container {
    width: 100%!important;
    max-width: 100%!important;
}
}

    After applying the css, please clear your browser cache and check.
    Please see the screenshot in the Private Content area.

    Best regards,
    Mike

    June 22, 2021 at 3:57 pm #1306967
    Munford

    thanks, that helped with the width issue.
    I still don’t see the video controls on mobile – I know I could replace it with a regular video element, just on small screens,
    but it doesn’t go fullwidth (see below).
    Any advice?
    Nancy

    June 23, 2021 at 12:33 pm #1307133
    Mike

    Hi,
    Glad to hear that helped, your last screenshot didn’t work please try again, when I look on your homepage the Vimeo video has controls, please see the screenshot in the Private Content area.

    Best regards,
    Mike

    June 23, 2021 at 1:47 pm #1307153
    Munford

    HI
    thanks for taking a look. I added a regular video element to show the controls on mobiles. I was just wondering if there was a way to display them when using a video background element, since it then goes fullscreen. If not, it’s fine like this.
    Nancy

    June 26, 2021 at 5:22 pm #1307524
    Mike

    Hi,
    Sorry for the late reply and thank you for your patience. Unfortunately, I didn’t find a way to show the video controls on a background video, but I did come up with this css to make your video element show fullscreen for mobile.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) {
.responsive #top.home #wrap_all #av_section_1 > .container {
    width: 100%!important;
    max-width: 100%!important;
}
.responsive #top.home #wrap_all #av_section_1 > .container > .content {
	padding: 0px !important;
}
.responsive #top.home #wrap_all #av_section_1 > .container > .content > div > div > .avia-video {
	    margin-bottom: 0 !important;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    September 16, 2021 at 10:50 am #1321182
    Munford

    thanks
    you can close this thread.

    September 16, 2021 at 11:35 am #1321195
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘mobile video controls, header width’ is closed to new replies.