AMP Videos – Stuck at 400px height

  • Resolved eek

    (@eek)


    4 years, 3 months ago

    I’m having issues with the video code block & AMP (Using the default TwentyTwenty WP Theme & the AMP Plugin)

    If I create a video block, add a link to the mp4, and select to have the block to “Wide Width” or “Full Width”, and no matter what type of AMP layout I select I can’t make the video fill in the width of the element, because it is forced to 400px height. This does not happen for example for a Vimeo Embed.

    If I select a “responsive” AMP Layout, the video doesn’t appear at all.

    As an example, for a default Video Block with a link set to “Wide Width” and “Default” AMP Layout, I get this code:

    <figure class="wp-block-video alignwide">
   <amp-video autoplay="" loop="" muted="" preload="auto" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" height="400" layout="fixed-height" width="auto" class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined i-amphtml-element i-amphtml-media-component i-amphtml-video-interface i-amphtml-layout" style="height:400px;" i-amphtml-layout="fixed-height">
      <a href="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" fallback="">https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4</a>
      <noscript>
         <video autoplay loop muted preload="auto" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" playsinline></video>
      </noscript>
      <video playsinline="" webkit-playsinline="" preload="auto" class="i-amphtml-fill-content i-amphtml-replaced-content" loop="" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4"></video>
      <i-amphtml-video-icon class="amp-video-eq amp-video-eq-play">
         <div class="amp-video-eq-col">
            <div class="amp-video-eq-filler amp-video-eq-1-1"></div>
            <div class="amp-video-eq-filler amp-video-eq-1-2"></div>
         </div>
         <div class="amp-video-eq-col">
            <div class="amp-video-eq-filler amp-video-eq-2-1"></div>
            <div class="amp-video-eq-filler amp-video-eq-2-2"></div>
         </div>
         <div class="amp-video-eq-col">
            <div class="amp-video-eq-filler amp-video-eq-3-1"></div>
            <div class="amp-video-eq-filler amp-video-eq-3-2"></div>
         </div>
         <div class="amp-video-eq-col">
            <div class="amp-video-eq-filler amp-video-eq-4-1"></div>
            <div class="amp-video-eq-filler amp-video-eq-4-2"></div>
         </div>
      </i-amphtml-video-icon>
   </amp-video>
</figure>

    With the container having max-width: 100%; height: 400px and the video being positioned to fill in the space using position: absolute; top: 0; bottom: 0; left: 0; right: 0

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter eek

    (@eek)

    Here is an example: https://thebleedingedge.tech/2020/08/12/amp-video-test/

    Plugin Author Weston Ruter

    (@westonruter)

    The 400px height here is the fallback for when the plugin can’t determine the dimensions of the video from the metadata. I think it’s because you are referencing the video from an external location rather than from the media library. If you upload it into the media library and then insert it then does that fix the issue?

    If so, you’ve encountered a known issue which I should file as an issue we should try to address.

    Note: We intend to remove the AMP Layout control as it’s not something authors should have to manipulate directly. See https://github.com/ampproject/amp-wp/issues/4554

    Thread Starter eek

    (@eek)

    Yes, if I upload the file in the media library there’s no issue with it.

    I understand this behavior for elements the browser doesn’t know the Aspect Ratio, but for video blocks, it shouldn’t have an issue.

    Also, another curious thing, on the link that I’ve sent yesterday, I now see the “responsive” video now appears and also has the proper width / height and so with the “Default” one.

    Yeah, I think removing the Layout control is a good thing.

    Plugin Author Weston Ruter

    (@westonruter)

    I understand this behavior for elements the browser doesn’t know the Aspect Ratio, but for video blocks, it shouldn’t have an issue.

    The issue for video is that the browser doesn’t know the intrinsic aspect ratio until the browser loads the video. If AMP were to wait to supply the width/height until the page loads, then this would result in layout shifting and be annoying for the user. AMP does all it can to ensure layout is stable from the moment the page first loads. For that reason, it requires all elements to have their width and height defined in the HTML so that the page doesn’t have to wait for the browser to load the element in order to determine the dimensions.

    When a video is uploaded into the media library, WordPress extracts the width and height from the uploaded file and the AMP plugin is able to use these to provide the dimensions in the generated HTML. For remotely-loaded videos, however, there are no such dimensions available. So that’s why there is a 400px height supplied.

    As opposed to uploading the video to the media library, the other workaround would be to edit the video block as HTML (and convert to a Custom HTML block) and then supply the width and height attributes like so:

    <figure class="wp-block-video"><video controls src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" width="1920" height="1080"></video></figure>

    I’ve filed a bug to implement fetching of external video dimensions: https://github.com/ampproject/amp-wp/issues/5233

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘AMP Videos – Stuck at 400px height’ is closed to new replies.