Advertisement
Guest User

Untitled

a guest
Jun 3rd, 2015
490
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.83 KB | None | 0 0
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement