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
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <head><script type="text/javascript"> 2 <head>
3 3
4 (function() {
5 var relegateNavigation = '';
6 var handleClickTagMessage = function(e) {
7 try {
8 var eventData = JSON.parse(e.data);
9 } catch (err) {
10 return;
11 }
12 if (eventData.isInitClickTag) {
13 if (eventData.clickTags) {
14 for (var i = 0; i < eventData.clickTags.length; i++) {
15 var clkTag = eventData.clickTags[i];
16 window[clkTag.name] = clkTag.url;
17 }
18 } else if (eventData.clickTag) {
19 window.clickTag = eventData.clickTag;
20 }
21 relegateNavigation = eventData.relegateNavigation;
22 }
23 };
24
25 if (open.call) {
26 window.open = function(open) {
27 return function(url, name, features) {
28 if (relegateNavigation === 'parent') {
29 var message = {'clickTag': url, 'isPostClickTag': true};
30 parent.postMessage(JSON.stringify(message), '*');
31 } else {
32 var args = [url, name];
33 if (features) {
34 args.push(features);
35 }
36 open.apply(window, args);
37 }
38 };
39 }(window.open);
40 }
41
42 if (window.addEventListener) {
43 window.addEventListener(
44 'message', handleClickTagMessage, false);
45 } else {
46 window.attachEvent('onmessage', handleClickTagMessage);
47 }
48 })();
49
50 </script>
51 <meta charset="utf-8"> 4 <meta charset="utf-8">
52 <title>HTML5 Ad</title> 5 <title>HTML5 Ad</title>
53 <meta name="ad.size" content="width=300,height=600">
54 <script type="text/javascript"> 6 <script type="text/javascript">
55 var clickTag = "https://thecommonwell.ca/wave/"; 7
8 // IAB source: modified to allow link testing
9 var clickTag = "http://thecommonwell.ca/wave";
10 function getParameterByName(name)
11 {
12 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
13 if (match == null || match == ""){
14 return clickTag;
15 } else{
16 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
17 }
18 }
19 clickTag = getParameterByName('clickTag');
20
21 </script>
22 <script type="text/javascript">
23 window.onload = function() {
24 window.isVideoClick = false;
25 var video = document.getElementById("video");
26 var videoControls = document.getElementById("video-controls");
27 var playButton = document.getElementById("play-pause");
28 playButton.addEventListener("click", function(e) {
29 if (video.paused == true) {
30 video.play();
31 playButton.setAttribute("class", "pause");
32 videoControls.setAttribute("class", "play");
33 } else {
34 video.pause();
35 playButton.setAttribute("class", "play");
36 }
37 });
38
39
40 }
56 </script> 41 </script>
57 42
58 43
...@@ -70,14 +55,19 @@ ...@@ -70,14 +55,19 @@
70 font-family: "Neue Haas Grotesk", Arial, sans-serif; 55 font-family: "Neue Haas Grotesk", Arial, sans-serif;
71 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/ 56 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
72 font-style: normal; 57 font-style: normal;
73
74
75 } 58 }
76 59
77 a{ 60 a{
78 text-decoration: none; 61 text-decoration: none;
79 color: inherit; 62 color: inherit;
80 } 63 }
64 #click-tag{
65 display: block;
66 position: absolute;
67 width: 100%;
68 height: 420px;
69 top:180px;
70 }
81 71
82 #border{ 72 #border{
83 position: relative; 73 position: relative;
...@@ -98,22 +88,54 @@ ...@@ -98,22 +88,54 @@
98 background-color: #000000; 88 background-color: #000000;
99 } 89 }
100 90
101 #video{ 91 #video, #video-controls{
102 position: absolute; 92 position: absolute;
93 width: 272px;
94 height: 152px;
103 left:13px; 95 left:13px;
104 top:15px; 96 top:15px;
105 } 97 }
98 #video-controls{
99 background: url(assets/video-poster.jpg) no-repeat center center;
100 }
101 #video-controls.play {
102 background: none;
103 }
104 #video-controls button{
105 width: 100%;
106 height: 100%;
107 background: url(assets/play.svg) no-repeat center center;
108 border: none;
109 cursor: pointer;
110 }
111 #video-controls button:hover{
112 background-size: 87px 87px;
113 }
114 #video-controls button.play{
115 background: url(assets/play.svg) no-repeat center center;
116 background-size: 85px 85px;
117 }
118 #video-controls button.pause{
119 background: none;
120 }
106 121
107 </style> 122 </style>
108 </head> 123 </head>
109 124
110 <body> 125 <body>
111 <a href="javascript:window.open(window.clickTag)">
112 <div id="border"> 126 <div id="border">
113 <div id="img"><img id="logoImg" src="assets/img@2x.gif" width="300" height="600" style="border-style:none"></div> 127 <div id="img"><img id="logoImg" src="assets/img@2x.gif" width="300" height="600" style="border-style:none"></div>
114 <iframe id="video" src="https://player.vimeo.com/video/162541360" width="272" height="160" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 128 <a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
129 <video id="video" width="272" height="152">
130 <source src="assets/vid.mp4" type="video/mp4">
131 Your browser doesn't support HTML5 video.
132 </video>
133 <div id="video-controls">
134 <button type="button" id="play-pause"></button>
135 </div>
136
115 </div> 137 </div>
116 </a> 138
117 139
118 </body> 140 </body>
119 141
......