h33raj.github.io/click.html at master · h33raj/h33raj.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!--
  ## Introduction

  Use [amp-iframe](https://www.ampproject.org/docs/reference/components/layout/amp-iframe) for embedding content into AMP files via iframe. Useful for displaying content otherwise not (yet) supported by AMP.
-->
<!-- -->
<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>amp-iframe</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!--  Import the amp-iframe component in the header. -->
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <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>
div[overflow] {
  text-align: center;
  background: #f9f7f7;
  line-height: 36px;
}
</style>
</head>
<body>

  <!--
    Iframes must be either 600px away from the top or not within the first 75% of the viewport when
    scrolled to the top – whichever is smaller. This example might not work depending on your screen
    width. In that case it will only show a loading indicator.
  -->
  <amp-iframe width="500" title="Netflix House of Cards branding: The Stack"
                          height="281"
                          layout="responsive"
                          sandbox="allow-scripts allow-same-origin allow-popups"
                          allowfullscreen
                          frameborder="0"
                          src="https://feedburner.google.com/fb/a/subscribers?id=naajlng6e5sbat5kiqhtgsilmg">
  </amp-iframe>


  <!-- ## Resizable Iframes -->
  <!--
    One important feature of `amp-iframe` is the ability to resize the iframe  at runtime. For this to work:

    * The `amp-iframe` must set the `allow-same-origin` sandbox attribute.
    * The `amp-iframe` must be defined with the `resizable` attribute.
    * The `amp-iframe` must have an `overflow` child element.
    * The iframe document must send an `embed-size` request:


    ```html
  window.parent.postMessage({
    sentinel: 'amp',
    type: 'embed-size',
    height: document.body.scrollHeight
  }, '*');
    ```

    The following example demonstrates two resizing use cases:

    1. **Resize on load:** the iframe size is initially set to `150x150`px via the `amp-iframe` layout. On page load, the embedded iframe will resize itself to `200x200`px.
    2. **Resize on user interaction:** pressing the button will resize the iframe to `300x300`px.

  -->

</body>
</html>