CODEWITHSUNDEEP
imagevideoerror-handlinghtml5-videoamp-html
Passele
Passele

Reputation: 66

The amp-video component fallback isn't executed

Amp-video fallback isn't working for me. In this code:

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>Placeholders &amp; fallbacks - Example 3</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
  <link rel="canonical" href="https://preview.amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders.example.3.html">
  <meta name="viewport" content="width=device-width">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
  <amp-img width="550" height="368" layout="responsive" src="non_existent_image.jpg">
    <div fallback>
      <p>Image not found</p>
    </div>
  </amp-img>

  <amp-video width="640" height="358" src="non_existent_video.mp4">
    <div fallback>
      <p>Video not found</p>
    </div>
  </amp-video>
</body>
</html>

The code can be accessed in the AMP Playground

The fallback for the missing image correctly displays the message 'Image not found', but the fallback for the missing video isn't shown.

What is wrong with the code above?

Upvotes: 0

Views: 92

Answers (0)

Related Questions