Created
April 12, 2017 17:04
-
-
Save aghassemi/a6cc9583d7e0778e08a8e5480bebda6d to your computer and use it in GitHub Desktop.
video a4a
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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