LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

FullScreen Vimeo Popup with Autoplay and CSS3 Transitions

Here's a cool way to create a fullscreen vimeo video popup with auto play.

CSS
/* Lazy-man Reset */
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}

/* Fullscreen Section */
header {
  width: 100%;
  /* 100% height */
  height: 100vh;
  color: white;
  background: #2980b9;
  text-align: center;
  padding: 20px;
  /* Fancy flex-box centering */
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-display: flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
}

header h1 {
  font-size: 40px;
  font-family: 'Roboto';
  font-weight: 700;
  max-width: 700px;
  margin-bottom: 10px;
}

header p {
  font-family: 'Roboto Slab';
  font-weight: 400;
  font-size: 20px;
  max-width: 700px;
  margin-bottom: 20px;
  opacity: .65;
}

.play {
  width: 70px;
  height: 70px;
  background: #222;
  display: block;
  margin: 0 auto;
  /* Important for :after */
  position: relative;
  /* Makes a circle */
  border-radius: 50%;
}

.play:hover {
  background: #333;
  cursor: pointer;
}

.play:after {
  position: absolute;
  content: "";
  /* Centering */
  top: 50%;
  margin-top: -15px;
  left: 50%;
  margin-left:  -8px;
  /* CSS Triangle */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 20px;
  border-color: transparent transparent transparent #ffffff;
}

/* Fullscreen Overlay */
.overlay {
  width: 100%;
  height: 100vh;
  /* 50% opacity black */
  background: rgba(0,0,0,.5);
  /* Stays locked on scroll */
  position: fixed;
  /* On top of the rest*/
  z-index: 2;
  /* Hidden */
  opacity: 0;
  /* No interference */
  left: -100%;
  /* CSS3 Transition */
  transition: opacity .5s;
  -webkit-transition: opacity .5s;
}

/* 90% width container */
.video-container {
  width: 90%;
  /* Centering */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.close {
  width: 20px;
  fill: white;
  position: absolute;
  right: 0;
  /* Bring above video */
  top: -30px;
}

.close:hover {
  /* 50% opacity white */
  fill: rgba(255,255,255,0.5);
  cursor: pointer;
}

/* Class to fade in overlay */
.show {
  opacity: 1;
}
JS
// Scroll to the very bottom to see the stuff we wrote, the big giant blocks are:
// froogaloop
// and
// fitvid.js

;(function( $ ){

  'use strict';

  $.fn.fitVids = function( options ) {
    var settings = {
      customSelector: null,
      ignore: null
    };

    if(!document.getElementById('fit-vids-style')) {
      // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
      var head = document.head || document.getElementsByTagName('head')[0];
      var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
      var div = document.createElement("div");
      div.innerHTML = '

x

'; head.appendChild(div.childNodes[1]); } if ( options ) { $.extend( settings, options ); } return this.each(function(){ var selectors = [ 'iframe[src*="player.vimeo.com"]', 'iframe[src*="youtube.com"]', 'iframe[src*="youtube-nocookie.com"]', 'iframe[src*="kickstarter.com"][src*="video.html"]', 'object', 'embed' ]; if (settings.customSelector) { selectors.push(settings.customSelector); } var ignoreList = '.fitvidsignore'; if(settings.ignore) { ignoreList = ignoreList + ', ' + settings.ignore; } var $allVideos = $(this).find(selectors.join(',')); $allVideos = $allVideos.not('object object'); // SwfObj conflict patch $allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video. $allVideos.each(function(count){ var $this = $(this); if($this.parents(ignoreList).length > 0) { return; // Disable FitVids on this video. } if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; } if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width')))) { $this.attr('height', 9); $this.attr('width', 16); } var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(), width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(), aspectRatio = height / width; if(!$this.attr('id')){ var videoID = 'fitvid' + count; $this.attr('id', videoID); } $this.wrap('
').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%'); $this.removeAttr('height').removeAttr('width'); }); }); }; // Works with either jQuery or Zepto })( window.jQuery || window.Zepto ); // Init style shamelessly stolen from jQuery https://jquery.com var Froogaloop = (function(){ // Define a local copy of Froogaloop function Froogaloop(iframe) { // The Froogaloop object is actually just the init constructor return new Froogaloop.fn.init(iframe); } var eventCallbacks = {}, hasWindowEvent = false, isReady = false, slice = Array.prototype.slice, playerDomain = ''; Froogaloop.fn = Froogaloop.prototype = { element: null, init: function(iframe) { if (typeof iframe === "string") { iframe = document.getElementById(iframe); } this.element = iframe; // Register message event listeners playerDomain = getDomainFromUrl(this.element.getAttribute('src')); return this; }, /* * Calls a function to act upon the player. * * @param {string} method The name of the Javascript API method to call. Eg: 'play'. * @param {Array|Function} valueOrCallback params Array of parameters to pass when calling an API method * or callback function when the method returns a value. */ api: function(method, valueOrCallback) { if (!this.element || !method) { return false; } var self = this, element = self.element, target_id = element.id !== '' ? element.id : null, params = !isFunction(valueOrCallback) ? valueOrCallback : null, callback = isFunction(valueOrCallback) ? valueOrCallback : null; // Store the callback for get functions if (callback) { storeCallback(method, callback, target_id); } postMessage(method, params, element); return self; }, /* * Registers an event listener and a callback function that gets called when the event fires. * * @param eventName (String): Name of the event to listen for. * @param callback (Function): Function that should be called when the event fires. */ addEvent: function(eventName, callback) { if (!this.element) { return false; } var self = this, element = self.element, target_id = element.id !== '' ? element.id : null; storeCallback(eventName, callback, target_id); // The ready event is not registered via postMessage. It fires regardless. if (eventName != 'ready') { postMessage('addEventListener', eventName, element); } else if (eventName == 'ready' && isReady) { callback.call(null, target_id); } return self; }, /* * Unregisters an event listener that gets called when the event fires. * * @param eventName (String): Name of the event to stop listening for. */ removeEvent: function(eventName) { if (!this.element) { return false; } var self = this, element = self.element, target_id = element.id !== '' ? element.id : null, removed = removeCallback(eventName, target_id); // The ready event is not registered if (eventName != 'ready' && removed) { postMessage('removeEventListener', eventName, element); } } }; /** * Handles posting a message to the parent window. * * @param method (String): name of the method to call inside the player. For api calls * this is the name of the api method (api_play or api_pause) while for events this method * is api_addEventListener. * @param params (Object or Array): List of parameters to submit to the method. Can be either * a single param or an array list of parameters. * @param target (HTMLElement): Target iframe to post the message to. */ function postMessage(method, params, target) { if (!target.contentWindow.postMessage) { return false; } var url = target.getAttribute('src').split('?')[0], data = JSON.stringify({ method: method, value: params }); if (url.substr(0, 2) === '//') { url = window.location.protocol + url; } target.contentWindow.postMessage(data, url); } /** * Event that fires whenever the window receives a message from its parent * via window.postMessage. */ function onMessageReceived(event) { var data, method; try { data = JSON.parse(event.data); method = data.event || data.method; } catch(e) { //fail silently... like a ninja! } if (method == 'ready' && !isReady) { isReady = true; } // Handles messages from moogaloop only if (event.origin != playerDomain) { return false; } var value = data.value, eventData = data.data, target_id = target_id === '' ? null : data.player_id, callback = getCallback(method, target_id), params = []; if (!callback) { return false; } if (value !== undefined) { params.push(value); } if (eventData) { params.push(eventData); } if (target_id) { params.push(target_id); } return params.length > 0 ? callback.apply(null, params) : callback.call(); } /** * Stores submitted callbacks for each iframe being tracked and each * event for that iframe. * * @param eventName (String): Name of the event. Eg. api_onPlay * @param callback (Function): Function that should get executed when the * event is fired. * @param target_id (String) [Optional]: If handling more than one iframe then * it stores the different callbacks for different iframes based on the iframe's * id. */ function storeCallback(eventName, callback, target_id) { if (target_id) { if (!eventCallbacks[target_id]) { eventCallbacks[target_id] = {}; } eventCallbacks[target_id][eventName] = callback; } else { eventCallbacks[eventName] = callback; } } /** * Retrieves stored callbacks. */ function getCallback(eventName, target_id) { if (target_id) { return eventCallbacks[target_id][eventName]; } else { return eventCallbacks[eventName]; } } function removeCallback(eventName, target_id) { if (target_id && eventCallbacks[target_id]) { if (!eventCallbacks[target_id][eventName]) { return false; } eventCallbacks[target_id][eventName] = null; } else { if (!eventCallbacks[eventName]) { return false; } eventCallbacks[eventName] = null; } return true; } /** * Returns a domain's root domain. * Eg. returns https://vimeo.com when https://vimeo.com/channels is sbumitted * * @param url (String): Url to test against. * @return url (String): Root domain of submitted url */ function getDomainFromUrl(url) { if (url.substr(0, 2) === '//') { url = window.location.protocol + url; } var url_pieces = url.split('/'), domain_str = ''; for(var i = 0, length = url_pieces.length; i < length; i++) { if(i<3) {domain_str += url_pieces[i];} else {break;} if(i<2) {domain_str += '/';} } return domain_str; } function isFunction(obj) { return !!(obj && obj.constructor && obj.call && obj.apply); } function isArray(obj) { return toString.call(obj) === '[object Array]'; } // Give the init function the Froogaloop prototype for later instantiation Froogaloop.fn.init.prototype = Froogaloop.fn; // Listens for the message event. // W3C if (window.addEventListener) { window.addEventListener('message', onMessageReceived, false); } // IE else { window.attachEvent('onmessage', onMessageReceived); } // Expose froogaloop to the global object return (window.Froogaloop = window.$f = Froogaloop); })(); //////////////////////////////////////// // Our Script //////////////////////////////////////// $(document).ready(function(){ // Initiate FitVid.js $(".video-container").fitVids(); // Iframe/player variables var iframe = $('#video')[0]; var player = $f(iframe); // Open on play $('.play').click(function(){ $('.overlay').css('left', 0) $('.overlay').addClass('show') player.api("play"); }) // Closes on click outside $('.overlay').click(function(){ $('.overlay').removeClass('show') setTimeout(function() { $('.overlay').css('left', '-100%') }, 300); player.api("pause"); }) });
Host Instantly Drag and Drop Website Builder

 

Description

Here's a cool way to create a cool full screen vimeo video popup that runs smooth as a whistle.
Term
Mon, 11/27/2017 - 22:13

Related Codes

Pen ID
Pen ID
Pen ID