Skip to content

Instantly share code, notes, and snippets.

@aghassemi

aghassemi/video-a4a.amp.html

Created April 12, 2017 17:04
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 aghassemi/a6cc9583d7e0778e08a8e5480bebda6d to your computer and use it in GitHub Desktop.
Save aghassemi/a6cc9583d7e0778e08a8e5480bebda6d to your computer and use it in GitHub Desktop.
Download ZIP
video a4a
Raw
video-a4a.amp.html
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>SambaPlayer AMP Example</title>
<link rel="canonical" href="amps.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1">
<link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
<script async custom-element="amp-social-share" src="../dist/v0/amp-social-share-0.1.max.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>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
<style amp-custom>
#splash-container, #video-container {
/* Set to ad dimensions */
width: 300px;
height: 168px;
/* Set so children can position themselves in relation to the container */
position: relative;
/* Basic font styles */
font-family: sans-serif;
line-height: 1;
color: #fff;
}
.main-link {
display: block;
color: white;
}
.brand {
/* Place in top-left corner */
position: absolute;
z-index: 1;
top: 10px;
left: 10px;
}
.watch-video {
/* Position roughly in vertical center */
position: absolute;
z-index: 1;
top: 70px;
left: 10px;
/* Button styles */
padding: 7px;
border: gray solid 1px;
border-radius: 7px;
background-color: rgba(0, 0, 0, 0.8);
cursor: pointer;
}
.title {
/* Place beneath "Watch Video" button */
position: absolute;
z-index: 1;
top: 110px;
left: 10px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
/* Font styles */
font-weight: bold;
font-size: 18px;
}
.close {
/* Place in top-right corner */
position: absolute;
z-index: 1;
right: 10px;
top: 10px;
/* Button styles */
cursor: pointer;
font-weight: bold;
font-size: 18px;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
}
#pause, #play {
/* Place in bottom-right corner */
position: absolute;
z-index: 1;
right: 10px;
bottom: 10px;
/* Button styles */
border: 1px solid grey;
vertical-align: center;
text-align: center;
background-color: rgba(0,0,0, 0.8);
cursor: pointer;
width: 32px;
height: 32px;
line-height: 32px;
}
</style>
</head>
<body>
<div id="splash-container">
<a href="https://ampbyexample.com/amp_ads/video_ad/"
target="_blank"
class="main-link">
<span class="brand">
Best Hotels Corp
</span>
<span class="title">
Amazing views from our collection of luxury hotel rooms.
</span>
<amp-img src="https://ampbyexample.com/img/tokyo.jpg"
width="300"
height="168">
</amp-img>
</a>
<div role="button"
class="watch-video"
on="tap:splash-container.hide,
video-container.show,
my-video.play,
play.hide,
pause.show">
Watch Video
</div>
</div>
<div id="video-container"
hidden>
<amp-video id="my-video"
layout="fixed-height"
height="168"
src="https://ampbyexample.com/video/tokyo.mp4"
loop>
</amp-video>
<div role="button"
class="close"
on="tap:video-container.hide,
splash-container.show,
my-video.pause">
×
</div>
<div role="button"
id="pause"
on="tap:my-video.pause,
play.show,
pause.hide">
||
</div>
<div role="button"
id="play"
on="tap:my-video.play,
play.hide,
pause.show">
▶
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment