Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html class="no-js" lang="">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="x-ua-compatible" content="ie=edge">
- <title></title>
- <meta name="description" content="">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="apple-touch-icon" href="apple-touch-icon.png">
- <!-- Place favicon.ico in the root directory -->
- <style>
- /* ====================================
- Demo specific styling
- ==================================== */
- .header-video {
- position: relative;
- overflow: hidden;
- }
- iframe, video {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- }
- iframe {
- height: 100%;
- width: 100%;
- }
- .teaser-video {
- width: 100%;
- height: auto;
- }
- .header-video--media {
- width: 100%;
- height: auto;
- }
- /* ====================================
- Just making stuff pretty
- ==================================== */
- * {
- margin: 0;
- padding: 0;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- body {
- font-family: 'Source Sans Pro', sans-serif;
- font-weight: 400;
- font-size: 100%;
- }
- p {
- font-size: 1.2em;
- margin-bottom: 1em;
- }
- h1, h2, h3 {
- font-weight: 700;
- margin-bottom: .35em;
- }
- h1 {
- font-size: 3em;
- line-height: 1;
- }
- h2 {
- font-size: 2em;
- margin-top: 1em;
- }
- .video-trigger {
- z-index: 5;
- position: absolute;
- background: #222;
- text-align: center;
- color: white;
- text-decoration: none;
- width: 200px;
- height: 60px;
- top: 0;
- z-index: 5;
- left: 50%;
- line-height: 60px;
- margin-left: -100px;
- top: 50%;
- margin-top: -30px;
- -webkit-transition: background .3s;
- -moz-transition: background .3s;
- transition: background .3s;
- }
- .video-trigger:hover {
- background: #363636;
- }
- .container {
- margin: 0 auto;
- max-width: 1200px;
- padding: 2em;
- }
- </style>
- </head>
- <body>
- <div class="header-video">
- <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">
- <a href="http://vimeo.com/87701971" class="video-trigger" id="video-trigger">Play video</a>
- </div>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
- <script>
- window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')
- </script>
- <script>
- var HeaderVideo = (function ($, document) {
- var settings = {
- container: $('.header-video'),
- video: '#video',
- header: $('.header-video--media'),
- videoTrigger: $('#video-trigger'),
- videoCloseTrigger: $('#video-close-trigger'),
- teaserVideo: $('#teaser-video'),
- autoPlayVideo: false
- };
- var init = function(options){
- settings = $.extend(settings, options);
- getVideoDetails();
- setFluidContainer();
- bindClickActions();
- settings.videoCloseTrigger.hide();
- if(videoDetails.teaser) {
- appendTeaserVideo();
- }
- if(settings.autoPlayVideo) {
- appendFrame();
- }
- };
- var bindClickActions = function() {
- settings.videoTrigger.on('click', function(e) {
- e.preventDefault();
- appendFrame();
- settings.videoCloseTrigger.fadeIn();
- });
- settings.videoCloseTrigger.on('click', function(e){
- e.preventDefault();
- removeFrame();
- });
- };
- var getVideoDetails = function() {
- //Get all the data attributes from the HTML container and return them as an object for easy data retrieval
- videoDetails = {
- id: settings.header.attr('data-video-src'),
- teaser: settings.header.attr('data-teaser-source'),
- provider: settings.header.attr('data-provider').toLowerCase(),
- videoHeight: settings.header.attr('data-video-height'),
- videoWidth: settings.header.attr('data-video-width')
- };
- return videoDetails;
- };
- var setFluidContainer = function () {
- settings.container.data('aspectRatio', videoDetails.videoHeight / videoDetails.videoWidth);
- $(window).resize(function() {
- var winWidth = $(window).width(),
- winHeight = $(window).height();
- settings.container
- .width(Math.ceil(winWidth)) //Round up to the nearest pixel value to prevent breaking of layout
- .height(Math.ceil(winWidth * settings.container.data('aspectRatio'))); //Set the videos aspect ratio, see https://css-tricks.com/fluid-width-youtube-videos/
- if(winHeight < settings.container.height()) {
- settings.container
- .width(Math.ceil(winWidth))
- .height(Math.ceil(winHeight));
- }
- }).trigger('resize'); //Trigger resize to force it to run on page load as well
- };
- var appendTeaserVideo = function() {
- if(Modernizr.video && !isMobile()) {
- var source = videoDetails.teaser,
- 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>';
- settings.container.append(html);
- }
- };
- var createFrame = function() {
- //Added an ID attribute to be able to remove the video element when the user clicks on the remove button
- if(videoDetails.provider === 'youtube') {
- var html = '<iframe id="video" src="http://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>';
- }
- else if(videoDetails.provider === 'vimeo') {
- var html = '<iframe id="video" src="http://player.vimeo.com/video/'+videoDetails.id+'?title=0&byline=0&portrait=0&color=3d96d2&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
- }
- else if(videoDetails.provider === 'html5') {
- 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>';
- }
- return html;
- };
- var appendFrame = function() {
- settings.header.hide();
- settings.container.append(createFrame());
- removePlayButton();
- settings.teaserVideo.hide();
- };
- var removeFrame = function() {
- $(settings.video).remove();
- settings.teaserVideo.fadeIn();
- displayPlayButton();
- removeRemoveButton();
- };
- var removePlayButton = function () {
- if(settings.videoTrigger) {
- settings.videoTrigger.fadeOut('slow');
- }
- };
- var displayPlayButton = function() {
- if(settings.videoTrigger) {
- settings.videoTrigger.fadeIn('slow');
- }
- };
- var removeRemoveButton = function() {
- settings.videoCloseTrigger.hide();
- };
- var isMobile = function () {
- //A super basic way of detecting mobile devices. Should be extended to a more
- //fool proof way in a production enviroment.
- return Modernizr.touch;
- }
- return {
- init: init
- };
- })(jQuery, document);
- </script>
- <script src="http://zerosixthree.se/labs/video-header/js/modernizr.js"></script>
- <script>
- $(document).ready(function() {
- HeaderVideo.init({
- container: $('.header-video'),
- header: $('.header-video--media'),
- videoTrigger: $("#video-trigger"),
- autoPlayVideo: false
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement