examples/released.amp.html - main - githubmirror/amphtml

examples/released.amp.html
145 строк7 KB
Daniel Rozenberg
Replace URLs of sample videos from soon-to-be-shutdown Google Cloud storage bucket to Netlify (#40486)
25 фев 2026, 21:15
25 фев 2026, 21:15f45b5ec
<!doctype html>
<html ⚡ lang="en">
<head>
  <meta charset="utf-8">
  <title>Released AMP components</title>
  <link rel="canonical" href="amps.html" >
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
  <style amp-custom>
    body {
      max-width: 527px;
      font-family: 'Questrial', Arial;
    }
    .box1 {
      border: 1px solid black;
      margin: 8px 0;
    }
  </style>
  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
  <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
  <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  <script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
  <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
  <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
  <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
  <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>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
  <h1>Released AMP components</h1>
  <h2>Responsive image (with lightbox)</h2>
  <p>
    <amp-img
        on="tap:lightbox1"
        role="button"
        tabindex="0"
        src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg" width=527 height=193 layout="responsive" ></amp-img>
  </p>
  <h2>Fixed size image</h2>
  <p>
    <amp-img id="img1" src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg" width=264 height=96></amp-img>
  </p>
  <h2>Hidden image</h2>
  <p>
    <amp-img id="img2" src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg" width=527 height=193 layout="nodisplay"></amp-img>
  </p>


  <section>
    <h2>Media query selection<h2>
    <amp-img
        media="(min-width: 650px)"
        id="img6" src="https://lh5.googleusercontent.com/-vmSp-YN10lA/VcH6S35gAWI/AAAAAAABYqk/6wuA5T3ApSk/w1832-h1376-no/IMG_20150805_131745-ANIMATION.gif"
        width=466
        height=355 layout="responsive" ></amp-img>
    <amp-img
        media="(max-width: 649px)"
        id="img7" src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg"
        width=527
        height=193 layout="responsive" ></amp-img>
  </section>


  <p>
    <amp-anim
        src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h225-no"
        width="400" height="225" layout="responsive">
      <amp-img placeholder
          src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h225-no-k"
          width="400" height="225" layout="responsive"></amp-img>
    </amp-anim>
  </p>

  <h2>Audio</h2>
    <amp-audio src="/examples/av/audio.mp3"></amp-audio>

  <h2>Video</h2>
  <amp-video
      src="https://amp-sample-videos.netlify.app/ForBiggerJoyrides.mp4"
      width="358"
      height="204"
      layout="responsive"
      controls></amp-video>


  <h2>Youtube</h2>
  <amp-youtube
      data-videoid="mGENRKrdoGY"
      layout="responsive"
      width="480" height="270"></amp-youtube>

  <h2>Ad A9</h2>
  <amp-ad width=300 height=250
      type="a9"
      data-aax_size="300x250"
      data-aax_pubname="abc123"
      data-aax_src="302">
  </amp-ad>


  <h2>Iframe</h2>
  <amp-iframe width=300 height=300
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
      layout="responsive"
      frameborder="0"
      src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA">
  </amp-iframe>


  <h2>Instagram</h2>
  <amp-instagram
      data-shortcode="fBwFP"
      width="320"
      height="392"
      layout="responsive">
  </amp-instagram>


  <h2>Ad AdSense</h2>
  <amp-ad width=300 height=200
      type="adsense"
      data-ad-client="ca-pub-9350112648257122">
  </amp-ad>


  <h2>Twitter</h2>
  <amp-twitter width=486 height=256
      layout="responsive"
      data-tweetID="585110598171631616"
      data-cards="hidden">
  </amp-twitter>

  <h2>Fit-text</h2>
  <amp-fit-text width="300" height="200" layout="responsive" class="box1">
    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
  </amp-fit-text>

  <amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>

  <amp-pixel width=1 height=1 src="https://pubads.g.doubleclick.net/activity;dc_iu=/12344/pixel;ord=$RANDOM?"></amp-pixel>
</body>
</html>