SHARE
TWEET

Untitled

a guest Jun 5th, 2015 406 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.     <style>
  13.      /* ====================================
  14.        Demo specific styling
  15.        ==================================== */
  16.  
  17.     .header-video {
  18.       position: relative;
  19.       overflow: hidden;
  20.     }
  21.  
  22.     iframe, video {
  23.       position: absolute;
  24.       top: 0;
  25.       bottom: 0;
  26.       left: 0;
  27.       right: 0;
  28.     }
  29.  
  30.     iframe {
  31.       height: 100%;
  32.       width: 100%;
  33.     }
  34.  
  35.     .teaser-video {
  36.       width: 100%;
  37.       height: auto;
  38.     }
  39.  
  40.     .header-video--media {
  41.       width: 100%;
  42.       height: auto;
  43.     }
  44.  
  45.     /* ====================================
  46.        Just making stuff pretty
  47.        ==================================== */
  48.  
  49.     * {
  50.       margin: 0;
  51.       padding: 0;
  52.       -webkit-box-sizing: border-box;
  53.       -moz-box-sizing: border-box;
  54.       box-sizing: border-box;
  55.     }
  56.  
  57.     body {
  58.       font-family: 'Source Sans Pro', sans-serif;
  59.       font-weight: 400;
  60.       font-size: 100%;
  61.     }
  62.  
  63.     p {
  64.       font-size: 1.2em;
  65.       margin-bottom: 1em;
  66.     }
  67.  
  68.     h1, h2, h3 {
  69.       font-weight: 700;
  70.       margin-bottom: .35em;
  71.     }
  72.  
  73.     h1 {
  74.       font-size: 3em;
  75.       line-height: 1;
  76.     }
  77.  
  78.     h2 {
  79.       font-size: 2em;
  80.       margin-top: 1em;
  81.     }
  82.  
  83.     .video-trigger {
  84.       z-index: 5;
  85.       position: absolute;
  86.       background: #222;
  87.       text-align: center;
  88.       color: white;
  89.       text-decoration: none;
  90.       width: 200px;
  91.       height: 60px;
  92.       top: 0;
  93.       z-index: 5;
  94.       left: 50%;
  95.       line-height: 60px;
  96.       margin-left: -100px;
  97.       top: 50%;
  98.       margin-top: -30px;
  99.       -webkit-transition: background .3s;
  100.       -moz-transition: background .3s;
  101.       transition: background .3s;
  102.     }
  103.  
  104.     .video-trigger:hover {
  105.       background: #363636;
  106.     }
  107.  
  108.     .container {
  109.       margin: 0 auto;
  110.       max-width: 1200px;
  111.       padding: 2em;
  112.     }
  113.     </style>    
  114. </head>
  115. <body>
  116.  
  117.  
  118.  
  119.     <div class="header-video">
  120.         <img src="http://zerosixthree.se/labs/video-header/img/masthead.jpg" class="header-video--media" data-video-src="87701971" data-teaser-source="http://zerosixthree.se/labs/video-header/video/masthead-teaser" data-provider="Vimeo" data-video-width="500" data-video-height="281">
  121.         <a href="http://vimeo.com/87701971" class="video-trigger" id="video-trigger">Play video</a>
  122.     </div>
  123.  
  124.  
  125.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  126.     <script>
  127.     window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')
  128.     </script>
  129.  
  130.     <script>
  131.       var HeaderVideo = (function ($, document) {
  132.  
  133.         var settings = {
  134.             container: $('.header-video'),
  135.             video: '#video',
  136.             header: $('.header-video--media'),
  137.             videoTrigger: $('#video-trigger'),
  138.             videoCloseTrigger: $('#video-close-trigger'),
  139.             teaserVideo: $('#teaser-video'),
  140.             autoPlayVideo: false
  141.         };
  142.  
  143.         var init = function(options){
  144.             settings = $.extend(settings, options);
  145.             getVideoDetails();
  146.             setFluidContainer();
  147.             bindClickActions();
  148.             settings.videoCloseTrigger.hide();
  149.            
  150.             if(videoDetails.teaser) {
  151.                 appendTeaserVideo();
  152.             }
  153.  
  154.             if(settings.autoPlayVideo) {
  155.                 appendFrame();
  156.             }
  157.         };
  158.  
  159.         var bindClickActions = function() {
  160.             settings.videoTrigger.on('click', function(e) {
  161.                 e.preventDefault();
  162.                 appendFrame();
  163.                 settings.videoCloseTrigger.fadeIn();
  164.             });
  165.             settings.videoCloseTrigger.on('click', function(e){
  166.                 e.preventDefault();
  167.                 removeFrame();
  168.             });
  169.         };
  170.  
  171.         var getVideoDetails = function() {
  172.             //Get all the data attributes from the HTML container and return them as an object for easy data retrieval
  173.             videoDetails = {
  174.                 id: settings.header.attr('data-video-src'),
  175.                 teaser: settings.header.attr('data-teaser-source'),
  176.                 provider: settings.header.attr('data-provider').toLowerCase(),
  177.                 videoHeight: settings.header.attr('data-video-height'),
  178.                 videoWidth: settings.header.attr('data-video-width')
  179.             };
  180.             return videoDetails;
  181.         };
  182.  
  183.         var setFluidContainer = function () {
  184.             settings.container.data('aspectRatio', videoDetails.videoHeight / videoDetails.videoWidth);
  185.  
  186.             $(window).resize(function() {
  187.                 var winWidth = $(window).width(),
  188.                     winHeight = $(window).height();
  189.  
  190.                 settings.container
  191.                     .width(Math.ceil(winWidth)) //Round up to the nearest pixel value to prevent breaking of layout
  192.                     .height(Math.ceil(winWidth * settings.container.data('aspectRatio'))); //Set the videos aspect ratio, see https://css-tricks.com/fluid-width-youtube-videos/
  193.  
  194.                 if(winHeight < settings.container.height()) {
  195.                    settings.container
  196.                        .width(Math.ceil(winWidth))
  197.                        .height(Math.ceil(winHeight));
  198.                }
  199.  
  200.            }).trigger('resize'); //Trigger resize to force it to run on page load as well
  201.  
  202.        };
  203.  
  204.        var appendTeaserVideo = function() {
  205.            if(Modernizr.video && !isMobile()) {
  206.                var source = videoDetails.teaser,
  207.                    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>';
  208.                 settings.container.append(html);
  209.             }
  210.         };
  211.        
  212.         var createFrame = function() {
  213.             //Added an ID attribute to be able to remove the video element when the user clicks on the remove button
  214.             if(videoDetails.provider === 'youtube') {
  215.                 var html = '<iframe id="video" src="http://www.youtube.com/embed/'+videoDetails.id+'?rel=0&amp;hd=1&autohide=1&showinfo=0&autoplay=1&enablejsapi=1&origin=*" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
  216.             }
  217.             else if(videoDetails.provider === 'vimeo') {
  218.                 var html = '<iframe id="video" src="http://player.vimeo.com/video/'+videoDetails.id+'?title=0&amp;byline=0&amp;portrait=0&amp;color=3d96d2&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
  219.             }
  220.             else if(videoDetails.provider === 'html5') {
  221.                 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>';
  222.             }
  223.             return html;
  224.         };
  225.  
  226.         var appendFrame = function() {
  227.             settings.header.hide();
  228.             settings.container.append(createFrame());
  229.             removePlayButton();
  230.             settings.teaserVideo.hide();
  231.         };
  232.  
  233.         var removeFrame = function() {
  234.             $(settings.video).remove();
  235.             settings.teaserVideo.fadeIn();
  236.             displayPlayButton();
  237.             removeRemoveButton();
  238.         };
  239.  
  240.         var removePlayButton = function () {
  241.             if(settings.videoTrigger) {
  242.                 settings.videoTrigger.fadeOut('slow');
  243.             }
  244.         };
  245.  
  246.         var displayPlayButton = function() {
  247.             if(settings.videoTrigger) {
  248.                 settings.videoTrigger.fadeIn('slow');
  249.             }
  250.         };
  251.  
  252.         var removeRemoveButton = function() {
  253.             settings.videoCloseTrigger.hide();
  254.         };
  255.  
  256.         var isMobile = function () {
  257.             //A super basic way of detecting mobile devices. Should be extended to a more
  258.             //fool proof way in a production enviroment.
  259.             return Modernizr.touch;
  260.         }
  261.  
  262.         return {
  263.             init: init
  264.         };
  265.        
  266.     })(jQuery, document);
  267.   </script>
  268.   <script src="http://zerosixthree.se/labs/video-header/js/modernizr.js"></script>
  269.   <script>
  270.     $(document).ready(function() {
  271.  
  272.        HeaderVideo.init({
  273.           container: $('.header-video'),
  274.           header: $('.header-video--media'),
  275.           videoTrigger: $("#video-trigger"),
  276.           autoPlayVideo: false
  277.         });    
  278.  
  279.     });
  280.   </script>
  281. </body>
  282.  
  283. </html>
RAW Paste Data
Top