Guest User

Untitled

a guest
Jun 5th, 2015
518
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

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.

×