amp-img / amp-video responsive, How to fix "image and video are cutted by the browser address bar"

330 Views Asked by At

I'm implementing amp stories.

Case: We have lots of stories on Instagram and we are migrating them to amp stories on the website.

I am using amp-story and I have a problem with the responsive with the amp-img and amp-video.

I think the responsive" is working well because if I tested it well on the playground.amp.dev. But it's not perfect when you see the image or video on the mobile (chrome browser or safari browser). The address bar in both cases cuts off the top of the image, and in case of safari it cuts it also at the bottom. It's not too much 40px on safari mobile and 80px on chrome mobile. But for some images is important.

Is there any chance to hide temporary the address bar or resize the image without loosing pixels?

Another tests: I tested using template="vertical" for your layer, and layout="responsive" But it makes the image quite small and add too much color background.

Full test example: https://www.recalculandoviajes.com/amp/poland-test.html

Example of amp-img tag:

    <amp-story-page id="cover" auto-advance-after="5s">
      <amp-story-grid-layer template="fill">
        <amp-img src="https://www.recalculandoviajes.com/wp-content/uploads/images/Varsovia-Recalculando-04.jpg" width="1080" height="1920" layout="responsive">
        </amp-img>
      </amp-story-grid-layer>
    </amp-story-page>

Example of amp-video tag:

   <amp-story-page id="page6" auto-advance-after="video3">
      <amp-story-grid-layer template="fill">
        <amp-video id="video3" autoplay width="639" height="1136" layout="responsive" poster="https://www.recalculandoviajes.com/wp-content/uploads/images/Varsovia-Recalculando-05p.jpg">
          <source src="https://www.recalculandoviajes.com/wp-content/uploads/images/Varsovia-Recalculando-05.mp4" type="video/mp4" />
        </amp-video>
      </amp-story-grid-layer>
    </amp-story-page>

I expect not too loose pixels and see the image full vertical screen on smartphones.

Is there any chance to hide temporary the address bar or resize the image without loosing pixels?

Do you have any recommendation? Is it a bug(not considering the browser address bar)?

Thank you so much in advance!

0

There are 0 best solutions below