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

examples/amp-tiktok.amp.html
85 строк4 KB
rebeccanthomas
✨ [`amp-tiktok`] Add validation rules for the amp-tiktok component. (#33999)
24 июн 2021, 23:15
24 июн 2021, 23:15535eb91
<!DOCTYPE html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <title>amp-tiktok example</title>
    <link rel="canonical" href="amps.html" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <!-- prettier-ignore -->
    <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>
    <style amp-custom>
      amp-tiktok {
        color: red;
        border-style: solid;
      }
    </style>
    <script
      async
      custom-element="amp-tiktok"
      src="https://cdn.ampproject.org/v0/amp-tiktok-0.1.js"
    ></script>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h2>`amp-tiktok` minimalist implementation with video id</h2>
    <div style="display: flex; flex-direction: row;">
      <amp-tiktok width="500" height="500" data-src="6943753342808034566">
      </amp-tiktok>
      <div style="height: 60vh; width: 300px">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.
      </div>
    </div>
    <h2>`amp-tiktok` minimalist implementation with oEmbed request link</h2>
    <amp-tiktok
      width="700"
      height="800"
      data-src="https://www.tiktok.com/@scout2015/video/6943753342808034566"
    >
    </amp-tiktok>
    <h2>`amp-tiktok` TikTok generated `blockquote` implementation</h2>
    <amp-tiktok width="500" height="800">
      <blockquote
        placeholder
        class="tiktok-embed"
        cite="https://www.tiktok.com/@countingprimes/video/6948210747285441798"
        data-video-id="6948210747285441798"
        style="max-width: 605px; min-width: 325px"
      >
        <section>
          <a
            target="_blank"
            title="@countingprimes"
            href="https://www.tiktok.com/@countingprimes"
            >@countingprimes</a
          >
          <p>
            VIM is great.... right up until you start typing the commands into every
            single text editor you see. I’d like to apologize for all my unneeded
            “:wq”’s
          </p>
          <a
            target="_blank"
            title="♬ original sound - countingprimes"
            href="https://www.tiktok.com/music/original-sound-6948210588145175302"
            >♬ original sound - countingprimes</a
          >
        </section>
      </blockquote>
    </amp-tiktok>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
  </body>
</html>