daily pastebin goal
56%
SHARE
TWEET

Untitled

a guest Jun 3rd, 2015 308 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
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top