Guest User

Untitled

a guest
Jun 3rd, 2015
390
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html class="no-js" lang="">
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <meta http-equiv="x-ua-compatible" content="ie=edge">
  7. <title></title>
  8. <meta name="description" content="">
  9. <meta name="viewport" content="width=device-width, initial-scale=1">
  10. <link rel="apple-touch-icon" href="apple-touch-icon.png">
  11. <!-- Place favicon.ico in the root directory -->
  12. <link rel="stylesheet" href="css/normalize.css">
  13. <link rel="stylesheet" href="css/main.css">
  14. <script src="js/vendor/modernizr-2.8.3.min.js"></script>
  15. </head>
  16.  
  17. <body>
  18. <!--[if lt IE 8]>
  19. <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  20. <![endif]-->
  21. <!-- Add your site or application content here -->
  22. <p>Hello world! This is HTML5 Boilerplate.</p>
  23.  
  24. <style>
  25.  
  26. .header {
  27. position: relative;
  28. overflow: hidden;
  29. }
  30.  
  31. iframe, video {
  32. position: absolute;
  33. top: 0;
  34. bottom: 0;
  35. left: 0;
  36. right: 0;
  37. }
  38.  
  39. iframe {
  40. height: 100%;
  41. width: 100%;
  42. }
  43.  
  44. .teaser-video {
  45. width: 100%;
  46. height: auto;
  47. }
  48.  
  49. .header-media {
  50. width: 100%;
  51. height: auto;
  52. }
  53. </style>
  54.  
  55.  
  56.  
  57. <div class="header-video">
  58. <img src="img/masthead.gif" class="header-video--media" data-video-src="87701971" data-teaser-source="video/masthead-teaser" data-provider="Vimeo" data-video-width="500" data-video-height="281">
  59. <a href="http://vimeo.com/87701971" class="video-trigger" id="video-trigger">Play video</a>
  60. </div>
  61.  
  62.  
  63.  
  64.  
  65.  
  66.  
  67.  
  68.  
  69.  
  70. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  71. <script>
  72. window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')
  73. </script>
  74.  
  75.  
  76.  
  77.  
  78. <script>
  79. var HeaderVideo = (function($, document) {
  80.  
  81. var settings = {
  82. container: $('.header-video'),
  83. header: $('.header-video--media'),
  84. videoTrigger: $("#video-trigger"),
  85. autoPlayVideo: false
  86. }
  87.  
  88. var init = function(options) {
  89. settings = $.extend(settings, options);
  90. }
  91.  
  92. return {
  93. init: init
  94. };
  95.  
  96.  
  97.  
  98. var getVideoDetails = function() {
  99. videoDetails = {
  100. id: settings.header.attr('data-video-src'),
  101. teaser: settings.header.attr('data-teaser-source'),
  102. provider: settings.header.attr('data-provider').toLowerCase(),
  103. videoHeight: settings.header.attr('data-video-height'),
  104. videoWidth: settings.header.attr('data-video-width')
  105. }
  106. return videoDetails;
  107. };
  108.  
  109.  
  110.  
  111.  
  112. var setFluidContainer = function () {
  113.  
  114. settings.container.data('aspectRatio', videoDetails.videoHeight / videoDetails.videoWidth);
  115.  
  116. $(window).resize(function(){
  117. var winWidth = $(window).width(),
  118. winHeight = $(window).height();
  119.  
  120. settings.container
  121. .width(winWidth)
  122. .height(winWidth * settings.container.data('aspectRatio'));
  123.  
  124. if(winHeight < settings.container.height()) {
  125. settings.container
  126. .width(winWidth)
  127. .height(winHeight);
  128. }
  129.  
  130. }).trigger('resize');
  131.  
  132. };
  133.  
  134.  
  135. var createFrame = function() {
  136. if(videoDetails.provider === 'youtube') {
  137. var html = '<iframe src="//www.youtube.com/embed/'+videoDetails.id+'?rel=0&hd=1&autohide=1&showinfo=0&autoplay=1&enablejsapi=1&origin=*" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
  138. }
  139. else if(videoDetails.provider === 'vimeo') {
  140. var html = '<iframe src="//player.vimeo.com/video/'+videoDetails.id+'?title=0&byline=0&portrait=0&color=3d96d2&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
  141. }
  142. else if(videoDetails.provider === 'html5') {
  143. var html = '<video autoplay="true" loop="loop" id="video"><source src="'+videoDetails.id+'.mp4" type="video/mp4"><source src="'+videoDetails.id+'.ogv" type="video/ogg"></video>';
  144. }
  145. return html;
  146. };
  147.  
  148. var appendTeaserVideo = function() {
  149. if(Modernizr.video && !isMobile()) {
  150. var source = videoDetails.teaser,
  151. html = ''<video autoplay="true" loop="loop" muted id="teaser-video" class="teaser-video">'<source src="'+source+'.mp4" type="video/mp4">'<source src="'+source+'.ogv" type="video/ogg">'</video>';
  152. settings.container.append(html);
  153. }
  154. };
  155. var isMobile = function () {
  156. return Modernizr.touch;
  157. }
  158.  
  159.  
  160.  
  161.  
  162.  
  163. var appendFrame = function() {
  164. settings.header.hide();
  165. settings.container.append(createFrame());
  166. $('#teaser-video').hide();
  167. if(settings.videoTrigger) {
  168. settings.videoTrigger.fadeOut('slow');
  169. }
  170. };
  171.  
  172.  
  173.  
  174.  
  175.  
  176.  
  177.  
  178.  
  179. var bindClickAction = function() {
  180. settings.videoTrigger.on("click", function(e) {
  181. e.preventDefault();
  182. appendFrame();
  183. });
  184. };
  185.  
  186.  
  187.  
  188.  
  189. })(jQuery, document);
  190.  
  191. </script>
  192.  
  193.  
  194.  
  195.  
  196.  
  197.  
  198.  
  199.  
  200.  
  201.  
  202.  
  203.  
  204.  
  205.  
  206.  
  207.  
  208.  
  209.  
  210.  
  211.  
  212.  
  213. </script>
  214.  
  215.  
  216.  
  217.  
  218. <script src="js/plugins.js"></script>
  219. <script src="js/main.js"></script>
  220. <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
  221. <script>
  222. (function(b, o, i, l, e, r) {
  223. b.GoogleAnalyticsObject = l;
  224. b[l] || (b[l] =
  225. function() {
  226. (b[l].q = b[l].q || []).push(arguments)
  227. });
  228. b[l].l = +new Date;
  229. e = o.createElement(i);
  230. r = o.getElementsByTagName(i)[0];
  231. e.src = 'https://www.google-analytics.com/analytics.js';
  232. r.parentNode.insertBefore(e, r)
  233. }(window, document, 'script', 'ga'));
  234. ga('create', 'UA-XXXXX-X', 'auto');
  235. ga('send', 'pageview');
  236. </script>
  237. </body>
  238.  
  239. </html>
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×