Okay
  Public Ticket #670039
URGENT poster.jpg not working on mobile phone
Closed

Comments

  • Najib started the conversation

    So this is with regards to the maven theme with the video on its index. I have the video folder with the video.mp4, the video.ogg, and the poster.jpg. The videos work fine, however on the mobile phone, my poster.jpg does not show and instead i get simply a black background for where poster.jpg should be.

    This is an urgent matter, please help.

  •  5
    Nick replied

    Hi Najib,

    Can you send me a link to your site so I can check out what went wrong?

    Thanks,
    Nick


    aetherthemes

  • Najib replied

    Hello Nick,

    Its www.katsnap.com.au

    Kind Regards,
    Najib


  •  5
    Nick replied

    I can see that the responsive functionality is disabled all together, did you delete the behavioural metadata from the head section?

    <!-- Behavioral Meta Data -->
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">

    aetherthemes

  • Najib replied

    Hey Nick,

    Yes, I accidentally deleted that meta line when modifying the metadata altogether. I have added it and will wait to see if it takes effect. I will let you know if it is still not showing.

    Regards,
    Najib


  • Najib replied

    Hello Nick,

    I added the line you suggested and the image still does not show on my phone -

    Any other ideas?

    Kind Regards,
    Najib






  •  5
    Nick replied

    Hi Najib,

    I can\'t seem to find the culprit by just debugging in the browser. Can you please zip up the whole site and send it to me so I can take a look at the code directly? You can try to attach it here or send it over at nikolay@aetherthemes.com

    Thanks,
    Nick


    aetherthemes

  • Najib replied

    Hello Nick,

    I have attached a compressed folder of the website. Please note that I have deleted the videos, images on the website (not poster.jpg), the vendor folder, and other irrelevant folders for the sake of saving space. Please let me know if you need anything else.

    Regards,
    Najib


    Attached files:  public_html.zip

  •  5
    Nick replied

    Hi Najib,

    There are some parts missing from the archive, like your index page, it\'s some kind of a PHP file and I don\'t have access to the markup.


    aetherthemes

  • Najib replied

    Hello Nick,

    Yes that is because this is a CakePHP based site. The index page is located in Src -> Template -> Contents -> Index.ctp (which is html mixed with php).

    Thats the file you\'re looking for.

    Regards,
    Najib




  •  5
    Nick replied

    Figured it out, the problem comes from the file reordering, since your CSS folder is not in your root folder the URL to the image specified is now incorrect. To fix it you will need to open up the \'style.css\' file (the maven style.css file) and scroll down to line 851 where you will find the styles to a No-Video Fallback option.

    .video-background.no-video #bgVideo {
        background: url(\'../video/poster.jpg\') no-repeat center;
        background-size: cover;
        opacity: .3;
    }
    

    Just replace the background URL with a direct link - http://www.katsnap.com.au/video/poster.jpg and you will get the following:

    .video-background.no-video #bgVideo {
        background: url(\'http://www.katsnap.com.au/video/poster.jpg\') no-repeat center;
        background-size: cover;
        opacity: .3;
    }
    

    This should fix the issue.

    Thanks,
    Nick


    aetherthemes

  • Najib replied

    Thank you so much Nick, that worked perfectly.