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 -->
- <link rel="stylesheet" href="css/normalize.css">
- <link rel="stylesheet" href="css/main.css">
- <script src="js/vendor/modernizr-2.8.3.min.js"></script>
- </head>
- <body>
- <!--[if lt IE 8]>
- <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>
- <![endif]-->
- <!-- Add your site or application content here -->
- <p>Hello world! This is HTML5 Boilerplate.</p>
- <style>
- .header {
- 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-media {
- width: 100%;
- height: auto;
- }
- </style>
- <div class="header-video">
- <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">
- <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'),
- header: $('.header-video--media'),
- videoTrigger: $("#video-trigger"),
- autoPlayVideo: false
- }
- var init = function(options) {
- settings = $.extend(settings, options);
- }
- return {
- init: init
- };
- var getVideoDetails = function() {
- 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(winWidth)
- .height(winWidth * settings.container.data('aspectRatio'));
- if(winHeight < settings.container.height()) {
- settings.container
- .width(winWidth)
- .height(winHeight);
- }
- }).trigger('resize');
- };
- var createFrame = function() {
- if(videoDetails.provider === 'youtube') {
- 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>';
- }
- else if(videoDetails.provider === 'vimeo') {
- 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>';
- }
- 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 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 isMobile = function () {
- return Modernizr.touch;
- }
- var appendFrame = function() {
- settings.header.hide();
- settings.container.append(createFrame());
- $('#teaser-video').hide();
- if(settings.videoTrigger) {
- settings.videoTrigger.fadeOut('slow');
- }
- };
- var bindClickAction = function() {
- settings.videoTrigger.on("click", function(e) {
- e.preventDefault();
- appendFrame();
- });
- };
- })(jQuery, document);
- </script>
- </script>
- <script src="js/plugins.js"></script>
- <script src="js/main.js"></script>
- <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
- <script>
- (function(b, o, i, l, e, r) {
- b.GoogleAnalyticsObject = l;
- b[l] || (b[l] =
- function() {
- (b[l].q = b[l].q || []).push(arguments)
- });
- b[l].l = +new Date;
- e = o.createElement(i);
- r = o.getElementsByTagName(i)[0];
- e.src = 'https://www.google-analytics.com/analytics.js';
- r.parentNode.insertBefore(e, r)
- }(window, document, 'script', 'ga'));
- ga('create', 'UA-XXXXX-X', 'auto');
- ga('send', 'pageview');
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement