Okay
  Public Ticket #2728532
Problem with Portfolio Items
Closed

Comments

  • Vidoje started the conversation

    Hello,
    I'm using Ryden theme which my client has chosen.

    This is URL of website is http://www.testbulb.club/portfolio/

    I have couple of questions. 

    1. When I open some portfolio item on mobile phone, is it possible that this background video(Video Hero) is played?
    For example when I check this item on PC, the video is running, but when I check it on phone, video is not running
    http://www.testbulb.club/rayden_portfolio/gold-man/

    2. Is it possible that my portfolio page shows Portfolio Image thumbnail(Hero Image) and when I enter on that portfolio Item, it should show Video Hero?


    Let me know if you need any additional details.


    Thanks in advance!

  •  1,974
    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:

    1. add

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

    }

    in customizer -> additional CSS

    2. 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.

    3.  go to /sections/hero_section_container.php  line 51

    <video loop muted class="bgvid">

    to

    <video loop muted playsinline class="bgvid">


    Now to remove the video from the portfolio grid, go to /sections/portfolio_section_item.php and remove the highlighted part:

    https://prnt.sc/10t8m2l


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy