FullScreen Vimeo Popup with Autoplay and CSS3 Transitions
How do I make an fullscreen vimeo popup with autoplay and css3 transitions?
Here's a cool way to create a cool full screen vimeo video popup that runs smooth as a whistle.. What is a fullscreen vimeo popup with autoplay and css3 transitions? How do you make a fullscreen vimeo popup with autoplay and css3 transitions? This script and codes were developed by Robby Klein on 07 July 2022, Thursday.
FullScreen Vimeo Popup with Autoplay and CSS3 Transitions - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FullScreen Vimeo Popup with Autoplay and CSS3 Transitions</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="overlay"> <div class="video-container"> <!-- SVG Close (X) Icon --> <svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg> <!-- Embedded video --> <iframe id="video" src="https://player.vimeo.com/video/104641191?api=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div>
</div>
<header> <div> <h1>FullScreen Vimeo Popup with Autoplay and CSS3 Transitions</h1> <p>Here's a cool way to create a fullscreen vimeo video popup with auto play.</p> <span class="play"></span> </div>
</header> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://robbyk.com/assets/pen.js'></script> <script src="js/index.js"></script>
</body>
</html>
FullScreen Vimeo Popup with Autoplay and CSS3 Transitions - Script Codes CSS Codes
/* 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;
}
FullScreen Vimeo Popup with Autoplay and CSS3 Transitions - Script Codes JS Codes
// 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 = '<p>x</p><style id="fit-vids-style">' + css + '</style>'; 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('<div class="fluid-width-video-wrapper"></div>').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 http://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 http://vimeo.com when http://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"); })
});
Developer | Robby Klein |
Username | robbyklein |
Uploaded | July 07, 2022 |
Rating | 4 |
Size | 6,416 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Youtube Embedded Transcripts | 3,306 Kb |
Reveal image as window gets wider | 2,562 Kb |
Dynamic jQuery Jump To Section | 5,780 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Jay | Jaycode | 3,784 Kb |
RRC wrapSwitch | Pshrmn | 2,922 Kb |
Getting Started | Viblast | 1,500 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
Search field | Jamesbarnett | 2,100 Kb |
Scroll Arrow | Robooneus | 4,437 Kb |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
A Pen by panstable | Panstable | 2,940 Kb |
Sidebar Thing | Jonambas | 2,779 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!