Viewing 11 posts - 31 through 41 (of 41 total)
1 2
  • Author
    Posts
  • August 6, 2017 at 6:43 am #834942
    Ismael

    Hi,

    I’m very sorry for the confusion. I thought that you’re using the video inside the theme’s full screen slider, not the layer slider. We added the following css code in the Quick CSS field to resized the background video on mobile.

    @media only screen and (max-width: 989px) {
  /* Add your Mobile Styles here */
  #top .avia-layerslider .ls-wp-container, #top .avia-layerslider .ls-wp-container .ls-parallax, #top .avia-layerslider .ls-wp-container .ls-parallax .ls-bg-video, #top .avia-layerslider .ls-wp-container .ls-parallax .ls-bg-outer {
      height: 100vh !important;
  }

  #top .avia-layerslider .ls-wp-container .ls-parallax .ls-bg-outer video {
      width: auto !important;
      height: 100vh !important;
      max-height: 100%;
  }
}

    Best regards,
    Ismael

    August 8, 2017 at 1:53 am #835659
    yannickdassignies

    Hi Ismael,

    The fix was spot on in Mozilla Firefox but it doesn’t go fullscreen on Google Chrome. I tried to clear/purge the cache on the site and on the browser but it doesn’t go fullscreen on Chrome, Microsoft Edge.

    I have a suggestion, can you help me make a CSS Webkit version of this for Chrome and for Edge?

    Thank you for your apology. I appreciate that.

    August 12, 2017 at 4:23 pm #837938
    Mike

    Hi,
    Please try this CSS for the black mobile band in Chrome and Edge, once it is transparent the video shows as full screen:

    @media only screen and (max-width: 767px){
.html_header_top.html_header_sticky #top #wrap_all #main {
    margin-top: -143px;
}
.responsive #top #wrap_all #header {    
    background: transparent!important; 
}
.av_header_transparency #advanced_menu_toggle {
    background-color: transparent!important; 
}}

    Best regards,
    Mike

    August 14, 2017 at 4:29 am #838423
    yannickdassignies

    Hi Mike,

    It doesn’t seem to work. Try to remove your cache or use incognito or private browsing, the black border is still there. Any workaround for this?

    Thank you.

    August 17, 2017 at 7:12 am #840266
    Ismael

    Hi,

    We modified the css code a bit. We also added unique css class attributes to the layer slider logo so as to not duplicate it on phone view.

    Best regards,
    Ismael

    August 17, 2017 at 7:31 am #840270
    yannickdassignies

    Hi Ismael,

    The video still shows a black border around it. Before, the bug only exist on the first load. Now even if you refresh it again, it won’t go to fullscreen anymore.

    I tried both Chrome and Mozilla without any cache. Didn’t work for both browsers.

    Here’s the screenshot

    August 18, 2017 at 4:03 pm #840910
    Victoria

    Hi yannickdassignies,

    Chrome and Mozilla on a Mac look fine from the first load.

    Best regards,
    Victoria

    August 22, 2017 at 12:54 am #842275
    yannickdassignies

    Hi Victoria,

    We still get the black border in Incognito and Private browsing. We are currently using windows 7 and windows 10. It will definitely work if you don’t use incognito or private browsing. Can you please dig more in to this?

    Thank you.

    August 23, 2017 at 7:18 am #842884
    Ismael

    Hi,

    I tested the following css modification and it is working even on incognito mode. Please add it in the Quick CSS field.

    video#ls-html5-1 {
    height: 200% !important;
    top: 50%;
    transform: translateY(-50%);
}

    Best regards,
    Ismael

    August 23, 2017 at 7:56 am #842896
    yannickdassignies

    Hi Ismael,

    Wow I’m impressed. It worked!

    Thank you so much!

    August 23, 2017 at 8:35 am #842914
    Ismael

    Hi,

    Glad it worked. We’ll close the thread now. Thank you for using Enfold!

    Best regards,
    Ismael

  • Author
    Posts
Viewing 11 posts - 31 through 41 (of 41 total)
1 2
  • The topic ‘How to make video slider full screen and mobile responsive?’ is closed to new replies.