Okay
  Public Ticket #2828125
Hero video background is not playing in mobile
Closed

Comments

  • Geevearchitects started the conversation

    1.home page hero background video is not playing in mobile 

    2. need to have different font size of hero title for mobile and pc

    3. how to speed up the site its slowing after the video is uploaded

  •   Geevearchitects replied privately
  •  1,778
    Support replied

    Hello

    1. It is not recommended, as a general practice, having videos autoplaying on mobile (and taking in consideration different data mobile plans and different networks streaming speeds). Also, the problem with ios devices is they interpret the HTML 5 videos as videos without player so they will embed it it in a popup player. You should provide a poster image (hero image) for mobile in video portfolio options.

    However, to enable video on mobile try the following:

    A. add

    @media only screen and (max-width: 1024px){      .hero-video-wrapper {         display: block;         visibility: visible;      }

    }

    in customizer -> additional CSS

    B. open/js.scripts.js and remove the following lines:

    var viewportWidth = $(window).width(); if (viewportWidth < 1024) {      $('.hero-video-wrapper').remove();   }

    hard refresh the page (Ctrl+F5) when you are done.

    C.  go to showcase-page.php and change the following line

    <video loop muted class="bgvid">

    to

    <video loop muted playsinline class="bgvid">

    same thing for /sections/hero_section_container.php  line 51


    2. you can use

    .slide-title {
        font-size: 80px;
        line-height: 90px;
        font-weight: 600;
    }

    to change the font attributes on PC and with a media query

    @media only screen and (max-width: 767px){
    .slide-title {
        font-size: 40px;
        line-height: 50px;
    }

    }


    @media only screen and (max-width: 1024px){
    .slide-title {
        font-size: 60px;
        line-height: 50px;

    }

    }

    on two different mobile resolutions. Change the values in pixels and add the code in customizer -> additional CSS



    3. have you tried to store/publish the video on a cdn network?

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Geevearchitects replied


    Hi, thanks for the reply,how to store it in CDN?

  • Geevearchitects replied

    about this part   

    <video loop muted playsinline class="bgvid">

    same thing for /sections/hero_section_container.php  line 51

    should take of the entire line replace it with it , whats the exact format?

  •  1,778
    Support replied

    Hi,

    sorry, it's line 42

    https://prnt.sc/1ditxl0

    in /sections/hero_section_container.php

    CDN - you need to find a provide of Content Delivery Network server that will store your video files.

    In addition here are some hints on how to optimize the speed of your site:

    https://clapat.ticksy.com/article/8082

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Geevearchitects replied

    Okay got it thanks 

    can i update wordpress 5.8 does it cause any problem to the theme?

  •  1,778
    Support replied

    We did not encounter any problem with wordpress 5.8 so far. Should you have any plz don't hesitate to report it.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy