Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
2eef8dce by Dan Rempel
Options

new play and clicktag

1 parent 8935f757
Inline Side-by-side
Showing 1 changed file with 79 additions and 57 deletions
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<meta name="ad.size" content="width=300,height=600">
<script type="text/javascript">
var clickTag = "https://thecommonwell.ca/wave/";
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
<script type="text/javascript">
window.onload = function() {
window.isVideoClick = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
video.play();
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
} else {
video.pause();
playButton.setAttribute("class", "play");
}
});
}
</script>
......@@ -70,14 +55,19 @@
font-family: "Neue Haas Grotesk", Arial, sans-serif;
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 420px;
top:180px;
}
#border{
position: relative;
......@@ -98,22 +88,54 @@
background-color: #000000;
}
#video{
#video, #video-controls{
position: absolute;
width: 272px;
height: 152px;
left:13px;
top:15px;
}
#video-controls{
background: url(assets/video-poster.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/play.svg) no-repeat center center;
border: none;
cursor: pointer;
}
#video-controls button:hover{
background-size: 87px 87px;
}
#video-controls button.play{
background: url(assets/play.svg) no-repeat center center;
background-size: 85px 85px;
}
#video-controls button.pause{
background: none;
}
</style>
</head>
<body>
<a href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="img"><img id="logoImg" src="assets/img@2x.gif" width="300" height="600" style="border-style:none"></div>
<iframe id="video" src="https://player.vimeo.com/video/162541360" width="272" height="160" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
<video id="video" width="272" height="152">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<div id="video-controls">
<button type="button" id="play-pause"></button>
</div>
</div>
</a>
</body>
......