Skip to content

Instantly share code, notes, and snippets.

@justinph

justinph/amp-video.html

Last active April 16, 2019 20:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save justinph/4c0100d6971b820e96b38f88d1e8d738 to your computer and use it in GitHub Desktop.
Save justinph/4c0100d6971b820e96b38f88d1e8d738 to your computer and use it in GitHub Desktop.
Download ZIP
amp cinemgraph header
Raw
amp-video.html
<!DOCTYPE html>
<html amp lang="en" ⚡>
<head>
<meta charset="utf-8">
<link href="self.html"
rel="canonical">
<meta content="width=device-width,minimum-scale=1,initial-scale=1"
name="viewport">
<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>
<title>amp-video</title>
<script async
custom-element="amp-video"
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
<script async
src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom="">
main { max-width: 620px; margin: 0 auto;}
.video-wrapper{
width: 100%;
padding-bottom: 66.667%; /* 3:2 */
background-color: blue;
position: relative;
}
/* this is the magic bit */
amp-video video{
width: auto;
object-fit: cover;
}
</style>
</head>
<body>
<main>
<div class="video-wrapper">
<amp-video autoplay
layout="fill"
loop
noaudio
poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png"
src="https://int.nyt.com/data/videotape/finished/2018/09/1537545825/furniture-up-shorter-360h.mp4"></amp-video>
</div>
<h1>This video is 16:9 forced to fit 3:2 container</h1>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment