amp-toolbox/packages/optimizer/spec/valid-amp/files/Advanced_Video_Docking.html at 4d351347c59446ef13e2cf332855b7668e2b5735 · ampproject/amp-toolbox · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237


<!doctype html>
<html amp lang="en">
<head>
  <meta charset="utf-8">
  <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>

  <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>

  <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
  <title>Advanced video docking</title>
  <link rel="canonical" href="https://example.com/advanced/advanced_video_docking/">
  <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>
    body {
      margin: 0;
      background: white;
      font-family: sans-serif;
    }

    header {
      background: white;
      padding: 10px 20px;
      border-bottom: 1px solid #ddd;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      z-index: 1;
      line-height: 40px;
      font-size: 18px;
    }

    main {
      margin: 0 auto;
      padding: 80px 0 0 0;
      width: 100vw;
    }

    .content {
      height: 200vh;
      width: calc(70vw - 20px);
      padding: 0 20px;
      box-sizing: border-box;
    }

    aside {
      right: 20px;
      margin-left: 70vw;
      position: fixed;
      top: 80px;

      /*
      Define a viewport-based width for the aside. The docking slot will expand
      to fill its width.
      */
      width: 30vw;
    }

    .more-content {
      padding: 20px 20px 0;
      background: #eaeaea;

      /*
      Offset vertical axis by the negative height of the docking slot.
      Since the docking slot is 30vw wide, its height is 16.85vw based on a 16:9
      aspect ratio
      */
      transform: translateY(-16.85vw);
    }

    .more-content ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .more-content li {
      display: block;
      margin: 0 -20px;
    }

    .more-content li a {
      display: block;
      border-top: 1px solid #ddd;
      text-decoration: none;
      padding: 16px 20px;
      color: #2ac;
    }

    h3 {
      margin: 0;
      padding-bottom: 20px;
    }

    /* This is only needed for the preview to work on AMP by Example. You don't
    need to include these set of properties. */
    #abe-preview > div {
      width: 100vw;
      max-width: 100vw;
    }

    /* Ditto. */
    .abe-experiment-warning {
      max-width: calc(70vw - 60px);
    }

    @media (max-width: 600px) {
      /* Hide on smaller devices to fallback to standard docking. */
      #dock-slot {
        display: none;
      }

      /* Reset fixed items. */
      aside,
      header {
        position: static;
      }

      aside {
        margin-left: 0;
        width: 100%;
      }

      .content {
        width: 100vw;
      }

      main {
        padding-top: 20px;
      }
    }
  </style>
</head>

<body>


  <amp-animation layout="nodisplay" id="slideSidebarDown">
    <script type="application/json">
      {
        "selector": ".more-content",
        "duration": "0.5s",
        "fill": "both",
        "easing": "ease",
        "keyframes": [
          {"transform": "translateY(-16.85vw)"},
          {"transform": "translateY(40px)"}
        ]
      }
    </script>
  </amp-animation>
  <header>My Header</header>
  <main>
    <div class="content">


      <amp-video
        src="https://amp-sample-videos.netlify.app/BigBuckBunny.mp4"
        poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png"
        artwork="img/bigbuckbunny.jpg"
        title="Big Buck Bunny"
        album="Blender"
        artist="Blender Foundation"
        width="720"
        height="405"
        layout="responsive"
        controls
        dock="#dock-slot">
      </amp-video>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis odio vitae sem ornare laoreet. Mauris
        sodales convallis eros, non imperdiet mauris ullamcorper eget. Aenean tempus augue eu nisl consectetur
        sagittis. Morbi vel nunc eu leo tristique vehicula. Sed finibus velit luctus, scelerisque mauris luctus,
        tristique justo. Pellentesque non mauris aliquam, mattis dui in, gravida lorem. Suspendisse consectetur dui
        quis quam fringilla pulvinar. Nunc sit amet leo porta, tincidunt dui quis, tempus nisl. Suspendisse aliquet,
        velit ac tincidunt finibus, massa mauris scelerisque dolor, sit amet varius mi felis non ante. Ut imperdiet
        auctor diam id ultricies. Phasellus fermentum ligula at luctus sodales. Nulla semper felis at tempus sagittis.
        Curabitur ac risus non turpis sagittis lobortis ut non tortor. Nunc id tempus nisi.</p>
      <p>Vestibulum sit amet posuere sapien. Fusce ac eleifend sapien. Morbi ut vulputate eros, non ornare erat.
        Pellentesque quis mi tempor, venenatis sapien non, eleifend ligula. Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Aliquam vehicula sem eu massa sollicitudin, quis condimentum risus fermentum. Nunc scelerisque
        posuere nisl ut tempus. Fusce blandit quis tortor nec facilisis.</p>
      <p>Mauris sed neque at erat tristique gravida. Suspendisse pretium rhoncus ante id efficitur. Praesent ligula
        purus, mollis sit amet metus non, pulvinar iaculis eros. Integer et nisi rhoncus, aliquet eros non, malesuada
        urna. Nunc tincidunt felis sed molestie ornare. Vivamus est magna, rutrum sit amet erat et, porttitor aliquam
        elit. Aenean condimentum urna nec urna dapibus, ultricies iaculis nisl porttitor. Sed vitae turpis est. Ut
        purus nibh, suscipit a est ut, ullamcorper aliquet velit. Nam egestas urna nec tortor laoreet, eu molestie
        lectus mattis. Pellentesque ut orci dignissim, molestie augue sed, venenatis diam. Curabitur congue metus
        euismod, pretium ligula sit amet, blandit orci. Nulla vel pretium urna. Nullam suscipit nisi eget semper
        pulvinar.</p>
      <p>Proin non rutrum ipsum. Duis a vestibulum velit, non tincidunt sapien. Orci varius natoque penatibus et magnis
        dis parturient montes, nascetur ridiculus mus. Donec condimentum malesuada sapien ut aliquet. Donec eleifend
        metus dui, vel dignissim dolor blandit ac. Quisque nunc erat, egestas nec arcu ac, molestie lobortis mauris.
        Maecenas non sapien eleifend, efficitur elit quis, mollis augue. Nunc euismod consectetur orci, sed scelerisque
        massa facilisis a.</p>
      <p>Curabitur laoreet in metus fermentum pretium. Nunc pretium iaculis scelerisque. Suspendisse at porttitor odio.
        Sed consequat imperdiet ligula vitae rhoncus. Nullam sagittis dui diam, sit amet convallis augue vestibulum in.
        Etiam in vestibulum eros. Phasellus semper mattis aliquet. Donec ac massa eget felis suscipit rhoncus a sed
        metus. Quisque pharetra feugiat dui, at tempor erat volutpat vel. Donec quam ipsum, suscipit quis nisi eu,
        tincidunt cursus libero. Integer sed pulvinar elit. Suspendisse ex nisi, egestas ac ante fringilla, convallis
        tempor ipsum. Quisque est odio, gravida ac malesuada vitae, scelerisque vel quam.</p>
    </div>
    <aside>


      <amp-layout
          layout="responsive"
          width="16"
          height="9"
          id="dock-slot"
          on="dock: slideSidebarDown.start;
              undock: slideSidebarDown.start, slideSidebarDown.reverse;">
      </amp-layout>


      <div class="more-content">
        <h3>More Content</h3>
        <ul>
          <li><a href="#">Was it an alien or something?! Click here to find out!</a></li>
          <li><a href="#">Baby ducks see water for the first time - Can you BELIEVE what they do?</a></li>
          <li><a href="#">Grocery stores HATE him: save up to 90% with this one weird trick.</a></li>
          <li><a href="#">When you read these 99 shocking food facts, you'll never want to eat again.</a></li>
          <li><a href="#">Scientists say giant asteroid could hit Earth next week, causing mass devastation.</a></li>
        </ul>
      </div>
    </aside>
  </main>
</body>
</html>