Skip to content

Instantly share code, notes, and snippets.

@itrelease

itrelease/video.html

Last active March 3, 2017 11:06
Show Gist options
  • Save itrelease/d0866dfbcb3baaca3ff46cdc957d9348 to your computer and use it in GitHub Desktop.
Save itrelease/d0866dfbcb3baaca3ff46cdc957d9348 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
video.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script>this.Meduza = function(modules) {
function __webpack_require__(moduleId) {
if (installedModules[moduleId]) return installedModules[moduleId].exports;
var module = installedModules[moduleId] = {
exports: {},
id: moduleId,
loaded: false
};
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
module.loaded = true;
return module.exports;
}
var installedModules = {};
__webpack_require__.m = modules;
__webpack_require__.c = installedModules;
__webpack_require__.p = "./";
return __webpack_require__(0);
}({
0: function(module, exports, __webpack_require__) {
__webpack_require__(21);
module.exports = __webpack_require__(24);
},
21: function(module, exports, __webpack_require__) {
"use strict";
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
"default": obj
};
}
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) callback(window.WebViewJavascriptBridge); else document.addEventListener("WebViewJavascriptBridgeReady", function() {
callback(window.WebViewJavascriptBridge);
}, false);
}
function handleImageClick(el) {
if ("undefined" !== typeof el && "undefined" !== typeof el.dataset && "undefined" !== typeof el.dataset.imageId) {
var imageId = el.dataset.imageId;
window.MobileBridge.gallery(imageId);
}
}
function hideFootnote() {
document.body.classList.remove("footnoteActive");
}
function handleFootnoteClick(el) {
var fHostEl = document.querySelector(".FootnoteHost");
if (!el.classList.contains("Footnote-dismiss")) {
if ("undefined" === typeof el || !el.classList.contains("FootnoteLink")) return;
var _el$dataset = el.dataset;
var title = _el$dataset.title;
var body = _el$dataset.body;
var footnoteEl = document.querySelector("#user-footnote");
var elRect = el.getBoundingClientRect();
var style = "top: " + (el.offsetTop - elRect.top + elRect.bottom + 4) + "px;";
fHostEl.style.height = document.body.offsetHeight + "px";
footnoteEl.innerHTML = '\n <div class="Footnote" style="' + style + '">\n <button class="Footnote-dismiss" type="button"></button>\n <h1>' + title + "</h1>\n <div>" + decodeHTML(body) + "</div>\n </div>";
document.body.classList.add("footnoteActive");
} else hideFootnote();
}
var _slicedToArray = function() {
function sliceIterator(arr, i) {
var _arr = [];
var _n = true;
var _d = false;
var _e = void 0;
try {
for (var _s, _i = arr[Symbol.iterator](); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"]) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
return function(arr, i) {
if (Array.isArray(arr)) return arr; else if (Symbol.iterator in Object(arr)) return sliceIterator(arr, i); else throw new TypeError("Invalid attempt to destructure non-iterable instance");
};
}();
var _iphoneInlineVideo = __webpack_require__(22);
var _iphoneInlineVideo2 = _interopRequireDefault(_iphoneInlineVideo);
var noop = function() {};
var acceptMessagesFrom = [ "https://api.meduza.io", "https://api.meduza.co", "https://api.meduza.in", "https://meduza.io", "https://special.meduza.io", "https://www.svyaznoy.travel" ];
var decodeHTML = function() {
function decodeHTMLEntities(str) {
if (!element) return str;
if (str && "string" === typeof str) {
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gim, "");
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "");
element.innerHTML = str;
str = element.textContent;
element.textContent = "";
}
return str;
}
var element = "undefined" !== typeof window ? document.createElement("div") : null;
return decodeHTMLEntities;
}();
var onMessageReceive = function(dataArr, el, e) {
var _dataArr = _slicedToArray(dataArr, 5);
var appName = _dataArr[0];
_dataArr[1];
var action = _dataArr[2];
var data = _dataArr[3];
var text = _dataArr[4];
var contentWindow = el.contentWindow;
if (el && (e.origin === window.location.origin || acceptMessagesFrom.indexOf(e.origin) > -1)) {
if ("duckling" !== appName && "shprota" !== appName) return;
if ("height" === action) el.style.height = data + "px"; else if ("origin" === action) {
var _window = window;
var location = _window.location;
var origin = encodeURIComponent(location.origin + location.pathname);
contentWindow.postMessage("external::origin::" + origin, "*");
} else if ("bridge" === action) {
var flag = window.MobileBridge && window.MobileBridge.share ? "true" : "false";
contentWindow.postMessage("external::bridge::" + flag, "*");
} else if ("share" === action) if ("undefined" !== typeof window.windowsBridge) window.windowsBridge.share(data, text); else window.MobileBridge.share(data, text); else if ("toggleScroll" === action) {
var _flag = Boolean(Number(data));
if (_flag) window.MobileBridge.blockScroll();
}
}
};
if (!window.MobileBridge) window.MobileBridge = {
share: noop,
gallery: noop,
blockScroll: noop
};
window.addEventListener("message", function(e) {
if ("string" === typeof e.data) {
var dataArr = e.data.split("::");
var _dataArr2 = _slicedToArray(dataArr, 2);
_dataArr2[0];
var embedId = _dataArr2[1];
var hasMultipleEmbeds = dataArr[4] && "multiple" === dataArr[4];
if (embedId) if (hasMultipleEmbeds) {
var embedEls = document.querySelectorAll("." + embedId);
for (var i = 0; i < embedEls.length; i++) onMessageReceive(dataArr, embedEls[i], e);
} else {
var embedEl = document.getElementById(embedId);
onMessageReceive(dataArr, embedEl, e);
}
}
}, false);
document.addEventListener("DOMContentLoaded", function() {
var _document = document;
var body = _document.body;
window.addEventListener("scroll", function() {
if (document.body.classList.contains("footnoteActive")) hideFootnote();
}, false);
body.addEventListener("click", function(e) {
var el = e.target;
handleImageClick(el);
handleFootnoteClick(el);
}, false);
var quizShareEl = document.querySelector(".QuizShareBtn");
if (quizShareEl) quizShareEl.addEventListener("click", function() {
var ok = document.querySelector(".QuizResult-ok").innerText;
var total = document.querySelector(".QuizResult-total").innerText;
var text = "Правильных ответов: " + ok + "/" + total;
var shareMethod = "undefined" !== typeof windowsBridge ? window.windowsBridge.share : window.MobileBridge.share;
shareMethod("", text);
}, false);
[].slice.call(document.querySelectorAll("video")).forEach(function(video) {
(0, _iphoneInlineVideo2["default"])(video);
video.parentNode.classList.add("frozen");
video.addEventListener("touchstart", function() {
video.play();
video.parentNode.classList.remove("frozen");
});
});
}, false);
connectWebViewJavascriptBridge(function(bridge) {
window.MobileBridge.share = function(url, text) {
bridge.callHandler("share", {
url: url,
text: text
});
};
window.MobileBridge.gallery = function(id) {
bridge.callHandler("gallery", id);
};
window.MobileBridge.blockScroll = function() {
bridge.callHandler("blockScroll");
};
});
},
22: function(module, exports, __webpack_require__) {
/*! npm.im/iphone-inline-video 2.0.2 */
"use strict";
function preventEvent(element, eventName, toggleProperty, preventWithProperty) {
function handler(e) {
if (Boolean(element[toggleProperty]) === Boolean(preventWithProperty)) e.stopImmediatePropagation();
delete element[toggleProperty];
}
element.addEventListener(eventName, handler, false);
return handler;
}
function proxyProperty(object, propertyName, sourceObject, copyFirst) {
function get() {
return sourceObject[propertyName];
}
function set(value) {
sourceObject[propertyName] = value;
}
if (copyFirst) set(object[propertyName]);
Object.defineProperty(object, propertyName, {
get: get,
set: set
});
}
function proxyEvent(object, eventName, sourceObject) {
sourceObject.addEventListener(eventName, function() {
return object.dispatchEvent(new Event(eventName));
});
}
function dispatchEventAsync(element, type) {
Promise.resolve().then(function() {
element.dispatchEvent(new Event(type));
});
}
function getAudioFromVideo(video) {
var audio = new Audio();
proxyEvent(video, "play", audio);
proxyEvent(video, "playing", audio);
proxyEvent(video, "pause", audio);
audio.crossOrigin = video.crossOrigin;
audio.src = video.src || video.currentSrc || "data:";
return audio;
}
function setTime(video, time, rememberOnly) {
if ((lastTimeupdateEvent || 0) + 200 < Date.now()) {
video[ಠevent] = true;
lastTimeupdateEvent = Date.now();
}
if (!rememberOnly) video.currentTime = time;
lastRequests[++requestIndex % 3] = 100 * time | 0;
}
function isPlayerEnded(player) {
return player.driver.currentTime >= player.video.duration;
}
function update(timeDiff) {
var player = this;
if (player.video.readyState >= player.video.HAVE_FUTURE_DATA) {
if (!player.hasAudio) {
player.driver.currentTime = player.video.currentTime + timeDiff * player.video.playbackRate / 1e3;
if (player.video.loop && isPlayerEnded(player)) player.driver.currentTime = 0;
}
setTime(player.video, player.driver.currentTime);
} else if (player.video.networkState === player.video.NETWORK_IDLE && 0 === player.video.buffered.length) player.video.load();
if (player.video.ended) {
delete player.video[ಠevent];
player.video.pause(true);
}
}
function play() {
var video = this;
var player = video[ಠ];
if (!video.webkitDisplayingFullscreen) {
if ("data:" !== player.driver.src && player.driver.src !== video.src) {
setTime(video, 0, true);
player.driver.src = video.src;
}
if (video.paused) {
player.paused = false;
if (0 === video.buffered.length) video.load();
player.driver.play();
player.updater.start();
if (!player.hasAudio) {
dispatchEventAsync(video, "play");
if (player.video.readyState >= player.video.HAVE_ENOUGH_DATA) dispatchEventAsync(video, "playing");
}
}
} else video[ಠplay]();
}
function pause(forceEvents) {
var video = this;
var player = video[ಠ];
player.driver.pause();
player.updater.stop();
if (video.webkitDisplayingFullscreen) video[ಠpause]();
if (!player.paused || forceEvents) {
player.paused = true;
if (!player.hasAudio) dispatchEventAsync(video, "pause");
if (video.ended) {
video[ಠevent] = true;
dispatchEventAsync(video, "ended");
}
}
}
function addPlayer(video, hasAudio) {
var player = video[ಠ] = {};
player.paused = true;
player.hasAudio = hasAudio;
player.video = video;
player.updater = intervalometer.frameIntervalometer(update.bind(player));
if (hasAudio) player.driver = getAudioFromVideo(video); else {
video.addEventListener("canplay", function() {
if (!video.paused) dispatchEventAsync(video, "playing");
});
player.driver = {
src: video.src || video.currentSrc || "data:",
muted: true,
paused: true,
pause: function() {
player.driver.paused = true;
},
play: function() {
player.driver.paused = false;
if (isPlayerEnded(player)) setTime(video, 0);
},
get ended() {
return isPlayerEnded(player);
}
};
}
video.addEventListener("emptied", function() {
var wasEmpty = !player.driver.src || "data:" === player.driver.src;
if (player.driver.src && player.driver.src !== video.src) {
setTime(video, 0, true);
player.driver.src = video.src;
if (wasEmpty) player.driver.play(); else player.updater.stop();
}
}, false);
video.addEventListener("webkitbeginfullscreen", function() {
if (!video.paused) {
video.pause();
video[ಠplay]();
} else if (hasAudio && 0 === player.driver.buffered.length) player.driver.load();
});
if (hasAudio) {
video.addEventListener("webkitendfullscreen", function() {
player.driver.currentTime = video.currentTime;
});
video.addEventListener("seeking", function() {
if (lastRequests.indexOf(100 * video.currentTime | 0) < 0) player.driver.currentTime = video.currentTime;
});
}
}
function overloadAPI(video) {
var player = video[ಠ];
video[ಠplay] = video.play;
video[ಠpause] = video.pause;
video.play = play;
video.pause = pause;
proxyProperty(video, "paused", player.driver);
proxyProperty(video, "muted", player.driver, true);
proxyProperty(video, "playbackRate", player.driver, true);
proxyProperty(video, "ended", player.driver);
proxyProperty(video, "loop", player.driver, true);
preventEvent(video, "seeking");
preventEvent(video, "seeked");
preventEvent(video, "timeupdate", ಠevent, false);
preventEvent(video, "ended", ಠevent, false);
}
function enableInlineVideo(video, opts) {
if (void 0 === opts) opts = {};
if (!video[ಠ]) {
if (!opts.everywhere) {
if (!iOS8or9) return;
if (!(opts.iPad || opts.ipad ? /iPhone|iPod|iPad/ : /iPhone|iPod/).test(navigator.userAgent)) return;
}
if (!video.paused && video.webkitDisplayingFullscreen) video.pause();
addPlayer(video, !video.muted);
overloadAPI(video);
video.classList.add("IIV");
if (video.muted && video.autoplay) video.play();
if (!/iPhone|iPod|iPad/.test(navigator.platform)) console.warn("iphone-inline-video is not guaranteed to work in emulated environments");
}
}
var intervalometer = __webpack_require__(23);
var iOS8or9 = "object" === typeof document && "object-fit" in document.head.style && !matchMedia("(-webkit-video-playable-inline)").matches;
var ಠ = "bfred-it:iphone-inline-video";
var ಠevent = "bfred-it:iphone-inline-video:event";
var ಠplay = "bfred-it:iphone-inline-video:nativeplay";
var ಠpause = "bfred-it:iphone-inline-video:nativepause";
var lastRequests = [];
var requestIndex = 0;
var lastTimeupdateEvent;
module.exports = enableInlineVideo;
},
23: function(module, exports) {
/*! npm.im/intervalometer */
"use strict";
function intervalometer(cb, request, cancel, requestParameter) {
function loop(now) {
requestId = request(loop, requestParameter);
cb(now - (previousLoopTime || now));
previousLoopTime = now;
}
var requestId;
var previousLoopTime;
return {
start: function() {
if (!requestId) loop(0);
},
stop: function() {
cancel(requestId);
requestId = null;
previousLoopTime = 0;
}
};
}
function frameIntervalometer(cb) {
return intervalometer(cb, requestAnimationFrame, cancelAnimationFrame);
}
function timerIntervalometer(cb, delay) {
return intervalometer(cb, setTimeout, clearTimeout, delay);
}
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.intervalometer = intervalometer;
exports.frameIntervalometer = frameIntervalometer;
exports.timerIntervalometer = timerIntervalometer;
},
24: function(module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = {
currentFontSize: function() {
var _document = document;
var body = _document.body;
var fontSize = parseInt(window.getComputedStyle(body, null).getPropertyValue("font-size"), 10);
return fontSize;
},
setFontSize: function(size) {
var _document2 = document;
var documentElement = _document2.documentElement;
var body = _document2.body;
documentElement.style.fontSize = size + "px";
body.style.fontSize = size + "px";
},
detectIos: function() {
var userAgent = window.navigator.userAgent.toLowerCase();
var ios = /iphone|ipod|ipad/.test(userAgent);
if ("undefined" !== typeof window && ios) document.querySelector("html").classList.add("ios");
}
};
}
});</script>
<style type="text/css">.Body{font-size:1rem;line-height:1.2223rem}.Body>*{max-width:650px}.Body:last-child>:last-child{margin-bottom:0}.Body>h3{margin-top:1rem;margin-bottom:.66rem;font-size:1.166rem;font-weight:700}.Body>blockquote,.Body>h3{font-family:Proxima Nova Mobile,Helvetica Neue,Circe Mobile,sans-serif}.Body>blockquote{margin:1rem 0;padding:.6rem;border:1px solid rgba(0,0,0,.08);border-radius:4px;background:#fff9cd;box-shadow:0 1px 15px rgba(0,0,0,.1);font-size:.88888889rem;line-height:1.11111111rem}.Body>blockquote:first-child{margin-top:0}.Body>blockquote a{color:#000;background-image:linear-gradient(180deg,currentColor 50%,transparent 0)}.Body>blockquote+h3{margin-top:1.77777778rem}.Body p{margin-bottom:.83333333rem}.Body p:empty{display:none}.Body p+ol,.Body p+ul{margin-top:-.5rem}.Body>ol,.Body>ul{margin:.83333333rem 0;list-style:none;padding:0}@media only screen and (min-width:650px){.Body>ol,.Body>ul{margin:1.11111111rem 0}}.Body>ol{counter-reset:list 0}.Body>ol li{margin-bottom:.33333333rem;padding:0 0 0 1.83333333rem;list-style-type:none;position:relative}@media contentWidth{.Body>ol li{width:1.44444444rem}}.Body>ol li:before{position:absolute;left:0;counter-increment:list;content:counter(list) ". ";width:1.27777778rem;text-align:right;white-space:nowrap}@media contentWidth{.Body>ol li:before{width:1.44444444rem}}.Body>ol:last-child,.Body>ul:last-child{margin-bottom:0}.Body>ul li{position:relative;margin:0 0 .33333333rem;padding:0 0 0 1.27777778rem}@media only screen and (min-width:650px){.Body>ul li{padding:0 0 0 2.11111111rem}}.Body>ul li:last-child{margin-bottom:0}.Body>ul li:before{position:absolute;top:0;left:.27777778rem;width:.44444444rem;content:'\2022';text-align:center;color:#b88b58;font-size:1rem;line-height:inherit}@media only screen and (min-width:650px){.Body>ul li:before{left:0;width:2rem;text-align:center;font-size:1.11111111rem}}.Affiliate{background-color:#fff;position:relative;padding:12px 0}.Affiliate-logo{display:block;height:25px;margin:0 auto 8px}.Affiliate-text{position:relative;padding:0 12px;text-align:center;font-family:PF Regal Text Pro Mobile,serif;font-size:15px;font-style:italic;line-height:18px;margin-bottom:0}.Affiliate-text a{position:relative;z-index:2;text-decoration:none}.Affiliate--card{margin-bottom:16px;text-align:center}.Affiliate--card:last-child{margin-bottom:0}.Author{margin-bottom:8px}.Author-name{font-size:.78rem;font-weight:700;margin:0}.Author-info{font-size:.78rem;font-style:italic;margin:0}.Authors{margin-top:20px;font-family:PF Regal Text Pro Mobile,serif}.Authors p{margin:0;color:#5c5c5c;font-size:16px}.Authors:before{display:block;width:50px;height:2px;margin-bottom:8px;content:'';background-color:#b88b58}.Card-chapter{position:relative;margin-bottom:16px}.Card-chapter:last-child{margin-bottom:0}.Card-chapter--hasMaterialNote{padding:15px 12px 0;background:#fff;overflow:hidden}@media only screen and (min-width:650px){.Card-chapter--hasMaterialNote{padding:15px 15px 0}}.Card-chapter--hasMaterialNote .MaterialNote{margin-top:0}.Card-chapter--hasMaterialNote .MaterialNote:before{display:none}.CardChapter{padding:12px;border-top:1px solid rgba(0,0,0,.2);border-bottom:1px solid rgba(0,0,0,.2);background:#fff}@media only screen and (min-width:650px){.CardChapter{padding:15px 25px 25px;border:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.35);border-radius:2px}}.CardChapter-head{position:relative;font-size:.83rem;line-height:.83333333rem;font-family:PF Regal Text Pro Mobile,serif;font-weight:900;color:#b88b58;text-align:center;margin-bottom:.66666667rem;margin-top:0}.CardChapter-head span{position:relative}.CardChapter-title{line-height:1.11111111rem;margin:0 0 1rem}.CardChapter-title,.CardTitle{font-size:1.11rem;font-family:Proxima Nova Mobile,Helvetica Neue,Circe Mobile,sans-serif;font-weight:700;text-align:center}.CardTitle{line-height:20px;padding:20px 14px 0;margin:0 -14px 18px;border-top:2px solid #d6d6d6}.CardTitle:first-child{margin-top:-16px;border-top:0}.CardTitle-counter{margin-bottom:14px;font-size:.83rem;line-height:15px;font-family:PF Regal Text Pro Mobile,serif;font-weight:900;color:#b88b58}.CardTitle-counter span{position:relative}.CardTitle-counter span:after,.CardTitle-counter span:before{content:"";position:absolute;width:20px;height:1px;right:100%;top:.7em;margin-right:10px;background-color:#b88b58}.CardTitle-counter span:after{left:100%;margin-right:0;margin-left:10px}.Context{margin:.83333rem 0;padding:0;list-style:none;font-size:1rem}@media only screen and (min-width:650px){.Context{margin:1.111rem 0}}.Context:last-child{margin-bottom:0}.Context>.Context-item{position:relative;margin:0 0 .83333333rem;padding:0 0 0 1.27777778rem}@media only screen and (min-width:650px){.Context>.Context-item{padding:0 0 0 2.11111111rem}}.Context>.Context-item:last-child{margin-bottom:0}.Context>.Context-item:before{position:absolute;top:0;left:.27777778rem;width:.44444444rem;content:'\2022';text-align:center;color:#b88b58;font-size:1rem;line-height:inherit}@media only screen and (min-width:650px){.Context>.Context-item:before{left:0;width:2rem;text-align:center;font-size:1.11111111rem}}.Context blockquote{margin:1rem 0;padding:.6rem;border:1px solid rgba(0,0,0,.08);border-radius:4px;background:#fff9cd;box-shadow:0 1px 15px rgba(0,0,0,.1);font-family:Proxima Nova Mobile,Helvetica Neue,Circe Mobile,sans-serif;font-size:.94rem;line-height:1.3rem}.Context blockquote a{color:#000}.Embed{margin-top:.83333rem;margin-bottom:.83333rem}@media only screen and (min-width:650px){.Embed{margin-top:1.11111111rem;margin-bottom:.83333rem}}.Embed-meta{max-width:650px;margin:0 auto;padding:4px 0 0;color:#191919;font-family:PF Regal Text Pro Mobile,serif;font-size:.83333333rem;line-height:.94444444rem}@media only screen and (min-width:650px){.Embed-meta{padding-right:0;padding-left:0;font-size:.88888889rem;line-height:1rem}}.Embed-credits{padding-top:.16666667rem;color:#666;font-family:PF Regal Text Pro Mobile,serif;font-size:.66666667rem;line-height:.72222222rem}@media only screen and (min-width:650px){.Embed-credits{font-size:.72222222rem}}.Embed-container iframe{left:0}.Embed--fullWidth{max-width:none;margin-right:-12px;margin-left:-12px}@media only screen and (min-width:650px){.Embed--fullWidth{max-width:none;margin-right:0;margin-left:0}}.Embed--fullWidth .Embed-meta,.EmbedCode--fullWidth .Embed-meta{padding-right:12px;padding-left:12px}@media only screen and (min-width:650px){.Embed--fullWidth .Embed-meta,.EmbedCode--fullWidth .Embed-meta{padding-right:0;padding-left:0}}.Embed-container{position:relative;height:0;padding-bottom:55%}.Embed-container iframe{position:absolute;top:0;right:0;bottom:0;left:0;max-width:100%}.Embed-Giphy{display:block}.EmbedCode-meta{max-width:650px;margin:0 auto;padding:4px 0 0}.EmbedCode-caption{color:#191919;font-family:PF Regal Text Pro Mobile,serif;font-size:15px;line-height:17px}@media only screen and (min-width:650px){.EmbedCode-caption{font-size:16px;line-height:18px}}.EmbedCode-credit{padding-top:3px;color:#666;font-family:PF Regal Text Pro Mobile,serif;font-size:12px;line-height:13px}@media only screen and (min-width:650px){.EmbedCode-credit{font-size:13px}}.EmbedCode{display:block;margin-bottom:16px}.EmbedCode iframe{display:inline-block;width:calc(100vw - 24px);max-width:500px}@media only screen and (min-width:512px){.EmbedCode iframe{width:100%}}@media only screen and (max-width:512px){.ios .EmbedCode iframe{max-width:100%!important;height:auto}}.Figure{margin:.83333rem -12px}@media only screen and (min-width:650px){.Figure{margin:1.111rem 0 .83333rem}}.Figure:first-child{margin-top:0}.Figure a{color:inherit;background-image:linear-gradient(180deg,#b88b58 50%,transparent 0);background-repeat:repeat-x;background-position:0 100%;background-size:1em .05rem}.Figure a:hover{color:#b88b58}.Figure img{max-width:100%;vertical-align:bottom}@media only screen and (min-width:650px){.Figure img{border-radius:2px}}.Figure--fullWidth img{width:100%}@media only screen and (min-width:650px){.Figure--fullWidth img{border-radius:2px}}.Figure-caption{max-width:650px;margin:0 auto;padding:4px 12px 0;font-size:.833rem;line-height:122%}@media only screen and (min-width:650px){.Figure-caption{padding-right:0;padding-left:0;font-size:.888rem;line-height:1rem}}.Figure-title{font-family:PF Regal Text Pro Mobile,serif;font-size:.77777778rem;line-height:.94444444rem;margin-bottom:2px;max-width:520px;color:#191919}@media only screen and (min-width:650px){.Figure-title{font-size:.888rem;line-height:1rem}}.Figure-credits{font-family:PF Regal Text Pro Mobile,serif;font-size:.72222222rem;line-height:.72222222rem;color:#666;padding-top:1px;max-width:520px}.Lead{position:relative;margin-bottom:24px;padding-bottom:24px;font-family:Proxima Nova Mobile,Helvetica Neue,Circe Mobile,sans-serif;font-size:.94444444rem}.Lead p{margin-bottom:0;font-size:inherit}.Lead a{color:inherit}.Lead:after,.Lead:before{position:absolute}.Lead:before{right:-12px;bottom:0;left:-12px;height:1px;content:"";background-color:rgba(0,0,0,.1)}.Lead:after{bottom:-6px;left:50%;width:28px;margin-left:-15px;padding:0 4px;content:"\2666 \2666 \2666";text-align:center;white-space:nowrap;color:rgba(0,0,0,.1);background-color:#fff;font-size:10px}.SourceQuote{margin:1rem 0;color:#000;border-left:4px solid #b88b58;border-radius:2px 0 0 2px;font-size:.88888889rem;line-height:1.11111111rem}.SourceQuote a,.SourceQuote a:hover{background-image:none}.SourceQuote-link{display:block;padding:13px 11px 6px;color:inherit;border-radius:0 2px 2px 0;background-color:#f5f5f5}@media only screen and (min-width:650px){.SourceQuote-link{padding:13px 16px 8px}}.SourceQuote-link:hover,.SourceQuote-link:visited{background-color:#ededed}.SourceQuote .SourceQuote-text{margin:0 0 11px;padding-bottom:14px;border-bottom:1px solid #d6d6d6;font-family:Proxima Nova Mobile,Helvetica Neue,Circe Mobile,sans-serif;font-size:inherit}.SourceQuote-arrow{display:none}.SourceQuote-footer{pointer-events:none;color:#292929;font-family:PF Regal Text Pro Mobile,serif;line-height:22px;letter-spacing:1px;font-size:14px}.SourceQuote-origin{text-transform:uppercase;font-family:Proxima Nova Mobile,Helvetica Neue,Circe Mobile,sans-serif;font-weight:700;font-style:normal}.UserQuote{margin-bottom:16px;padding:12px 0;border-top:2px solid #b88b58;border-bottom:2px solid #b88b58}.UserQuote-media{position:relative;overflow:hidden;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #ebebeb}.UserQuote-media:before{position:absolute;top:0;bottom:8px;left:115px;width:1px;content:'';background-color:#ebebeb}.UserQuote-img{float:left;width:100px;margin-right:16px}.UserQuote-img img{border-radius:50%}.UserQuote-info{overflow:hidden;padding-left:16px;color:#5c5c5c}.UserQuote-info h1{font-family:Proxima Nova Mobile,Helvetica Neue,Circe Mobile,sans-serif;font-size:1.11rem;line-height:1;margin:0 0 8px}.UserQuote-info p{font-family:PF Regal Text Pro Mobile,serif;font-size:.78rem;margin:0}.UserQuote-content{font-size:1rem;font-weight:700;font-style:italic;color:#3d3d3d}.FootnoteLink{padding:0 4px;border-radius:4px;background:#f8f8f8;cursor:pointer;position:relative;white-space:pre-wrap;box-shadow:inset 1px 0 #b3b3b3,inset 0 1px #b3b3b3,inset -1px 0 #b3b3b3,inset 0 -1px #b3b3b3}@media only screen and (min-width:650px){.FootnoteLink{padding-bottom:1px}}.FootnoteLink:hover{background:#f3f3f3;box-shadow:inset 1px 0 #999,inset 0 1px #999,inset -1px 0 #999,inset 0 -1px #999}.FootnoteLink--active{background:#f4efe9;box-shadow:inset 1px 0 #b88b58,inset 0 1px #b88b58,inset -1px 0 #b88b58,inset 0 -1px #b88b58}.Footnote{position:absolute;width:100%;max-width:350px;margin:auto;padding:12px .83333rem;border:1px solid rgba(0,0,0,.1);border-radius:4px;background:#fff;box-shadow:0 3px 15px 0 rgba(0,0,0,.2)}.Footnote h1{margin-top:0;margin-bottom:5px;font-family:Proxima Nova Mobile,Helvetica Neue,Circe Mobile,sans-serif;font-size:15px;line-height:17px}.Footnote div{font-family:PF Regal Text Pro Mobile,serif;font-size:16px;line-height:20px}.Footnote p{margin:0}.Footnote p+p{margin-top:12px}.Footnote-dismiss{position:absolute;top:10px;right:7px;margin:0;padding:4px;cursor:pointer;border-width:0;background-color:transparent}.Footnote-dismiss:before{display:block;width:12px;height:12px;content:'';background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='b' d='M0 0h12v12H0z'/%3E%3Cpath d='M5.1 5.1H0v1.8h5.1V12h1.8V6.9H12V5.1H6.9V0H5.1v5.1z' id='a'/%3E%3Cmask id='d' x='-.5' y='-.5' width='13' height='13'%3E%3Cpath fill='%23fff' d='M-.5-.5h13v13h-13z'/%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='c' fill='%23fff'%3E%3Cuse xlink:href='%23b'/%3E%3C/mask%3E%3Cg mask='url(%23c)' transform='rotate(45 6 6)'%3E%3Cuse fill='%23707070' xlink:href='%23a'/%3E%3Cuse stroke='%23FFF' mask='url(%23d)' xlink:href='%23a'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.Footnote-dismiss:hover{fill:#b88b58}.Related{margin:1.38888889rem 0;border-radius:2px;background:#fff;box-shadow:0 1px 15px rgba(0,0,0,.1),inset 0 4px 0 #b88b58}.Related:last-child{margin-bottom:0}.Related ul{padding:0;margin:0;list-style:none}.Related h3{margin:0;padding:13px .83333rem 2px;letter-spacing:1px;text-transform:uppercase;color:#666;font-family:Proxima Nova Mobile,Helvetica Neue,Circe Mobile,sans-serif;font-size:.77777778rem;line-height:1.4}@media only screen and (min-width:650px){.Related h3{padding:13px .83333rem 9px;line-height:1.38888889rem}}.Related a{background-image:none;display:block;padding:.83333rem;transition:color .15s;color:inherit;font-size:1rem;line-height:1.22222222rem}.Related a:hover{background-image:none;color:#5c5c5c}.Related a[href*="/news/"] .Related-title--first{font-family:PF Regal Text Pro Mobile,serif;font-weight:400;font-size:1.05555556rem}.Related li{padding:0}.Related li+li{border-top:1px solid #e6e6e6}.Related-title--first{font-family:Proxima Nova Mobile,Helvetica Neue,Circe Mobile,sans-serif;font-size:.94444444rem;font-weight:700}@media only screen and (min-width:650px){.Related-title--first{font-size:1.05555556rem}}.Slides{background-color:#e6e6e6}.Slide-slide{margin:12px 0}.Slide-body{padding:12px 12px 1px;background:#fff;box-shadow:inset 0 1px 0 0 rgba(0,0,0,.15),inset 0 -1px 0 0 rgba(0,0,0,.2)}.Slide-body .Embed-Giphy{margin:0 -12px}.Slide-body .EmbedCode:first-child{margin-top:-12px}.Slide-body--hasMaterialNote .MaterialNote{margin-top:0}.Slide-body--hasMaterialNote .MaterialNote:before{display:none}.Slide-body>h3{margin-top:1rem;margin-bottom:.66rem;font-size:1.166rem;font-weight:700}.Slide-body>blockquote,.Slide-body>h3{font-family:Proxima Nova Mobile,Helvetica Neue,Circe Mobile,sans-serif}.Slide-body>blockquote{margin:1rem 0;padding:.6rem;border:1px solid rgba(0,0,0,.08);border-radius:4px;background:#fff9cd;box-shadow:0 1px 15px rgba(0,0,0,.1);font-size:.88888889rem;line-height:1.11111111rem}.Slide-body>blockquote:first-child{margin-top:0}.Slide-body>blockquote a{color:#000;background-image:linear-gradient(180deg,currentColor 50%,transparent 0)}.Slide-body>blockquote+h3{margin-top:1.77777778rem}.Slide-body p{margin-bottom:.83333333rem}.Slide-body p+ol,.Slide-body p+ul{margin-top:-.5rem}.Slide-body>ol,.Slide-body>ul{margin:.83333333rem 0;list-style:none;padding:0}@media only screen and (min-width:650px){.Slide-body>ol,.Slide-body>ul{margin:1.11111111rem 0}}.Slide-body>ol{counter-reset:list 0}.Slide-body>ol li{margin-bottom:.33333333rem;padding:0 0 0 1.83333333rem;list-style-type:none;position:relative}@media contentWidth{.Slide-body>ol li{width:1.44444444rem}}.Slide-body>ol li:before{position:absolute;left:0;counter-increment:list;content:counter(list) ". ";width:1.27777778rem;text-align:right;white-space:nowrap}@media contentWidth{.Slide-body>ol li:before{width:1.44444444rem}}.Slide-body>ul li{position:relative;margin:0 0 .33333333rem;padding:0 0 0 1.27777778rem}@media only screen and (min-width:650px){.Slide-body>ul li{padding:0 0 0 2.11111111rem}}.Slide-body>ul li:last-child{margin-bottom:0}.Slide-body>ul li:before{position:absolute;top:0;left:.27777778rem;width:.44444444rem;content:'\2022';text-align:center;color:#b88b58;font-size:1rem;line-height:inherit}@media only screen and (min-width:650px){.Slide-body>ul li:before{left:0;width:2rem;text-align:center;font-size:1.11111111rem}}.Slide-body--hasMaterialNote{padding:20px 12px 7px;background:#fff;box-shadow:inset 0 1px 0 0 rgba(0,0,0,.15);margin-bottom:0}.MaterialNote{margin-top:25px;max-width:650px}.MaterialNote:empty:before{margin-bottom:0}.MaterialNote p{font-size:inherit!important;color:inherit!important;margin:0!important}.MaterialNote:before{content:'';display:block;width:60px;height:1px;background:#000;margin-bottom:15px}.MaterialNote a{color:inherit;background-image:linear-gradient(180deg,#b88b58 50%,transparent 0);background-repeat:repeat-x;background-position:0 100%;background-size:1em .15rem}.MaterialNote a:hover{color:#b88b58}.MaterialNote-caption{margin-bottom:8px;font-size:16px;line-height:20px;font-family:Proxima Nova Mobile,Helvetica Neue,Circe Mobile,sans-serif}.MaterialNote-caption:last-child{margin-bottom:0}.MaterialNote-caption b{font-weight:700}.MaterialNote-caption p+p{margin-top:8px}.MaterialNote-credit{font-family:Proxima Nova Mobile,Helvetica Neue,Circe Mobile,sans-serif;font-size:12px;color:#666;margin-top:9px}.MaterialNote-credit:last-child{margin-bottom:0}.MaterialNote-credit a{background-position:0 105%}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body,html{font-size:18px}body{margin:0;padding:16px 12px 6px;font-family:PF Regal Text Pro Mobile,serif;line-height:1.3;-ms-hyphens:auto;hyphens:auto;background-color:#fff;-webkit-hyphens:auto;-webkit-overflow-scrolling:touch}p{font-size:1rem;margin:0 0 16px;color:#292929}a{text-decoration:none;color:inherit;background-repeat:repeat-x;background-position:0 100%;background-size:1em 2px}a,a:hover{background-image:linear-gradient(180deg,#b88b58 50%,transparent 0)}a:hover{color:#b88b58}img{max-width:100%}iframe{border:0}.cards{background-color:#e6e6e6;padding-left:0;padding-right:0;padding-bottom:0}.slides{background:#e6e6e6;padding:0}.slides .Lead{background:#fff;padding:12px 12px 18px;box-shadow:inset 0 -1px 0 0 rgba(0,0,0,.2);margin-bottom:12px}.frozen{position:relative}.frozen:after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill-opacity='.5' fill='%23000' cx='35' cy='35' r='35'/%3E%3Cpath d='M35 66.75c2.816 0 5.585-.367 8.256-1.084a1.25 1.25 0 1 0-.65-2.415c-2.46.662-5.01 1-7.607 1a1.25 1.25 0 0 0 0 2.5zm15.946-4.29a31.76 31.76 0 0 0 6.587-5.092 1.25 1.25 0 1 0-1.774-1.762 29.4 29.4 0 0 1-6.07 4.694 1.25 1.25 0 1 0 1.257 2.16zm11.632-11.716a31.566 31.566 0 0 0 3.147-7.713 1.25 1.25 0 1 0-2.418-.629 29.066 29.066 0 0 1-2.898 7.102 1.25 1.25 0 1 0 2.17 1.242zm4.172-15.912a31.814 31.814 0 0 0-1.128-8.25 1.25 1.25 0 1 0-2.411.661 29.253 29.253 0 0 1 1.04 7.602 1.249 1.249 0 1 0 2.5-.013zM62.376 18.91a31.822 31.822 0 0 0-5.128-6.56 1.25 1.25 0 0 0-1.751 1.782 29.367 29.367 0 0 1 4.726 6.046 1.248 1.248 0 1 0 2.154-1.267zM50.598 7.34a31.543 31.543 0 0 0-7.73-3.107 1.25 1.25 0 1 0-.617 2.422c2.496.637 4.886 1.6 7.118 2.86A1.25 1.25 0 1 0 50.6 7.339zM34.665 3.25c-2.815.03-5.58.425-8.244 1.17a1.25 1.25 0 0 0 .675 2.408 29.22 29.22 0 0 1 7.596-1.078 1.25 1.25 0 1 0-.025-2.501zM18.762 7.71a31.854 31.854 0 0 0-6.533 5.162 1.25 1.25 0 1 0 1.792 1.742 29.385 29.385 0 0 1 6.02-4.758 1.249 1.249 0 1 0-1.28-2.147zM7.256 19.55a31.463 31.463 0 0 0-3.065 7.745 1.251 1.251 0 0 0 2.427.605 29.052 29.052 0 0 1 2.822-7.133 1.25 1.25 0 0 0-.484-1.7 1.248 1.248 0 0 0-1.7.48zM3.254 35.5a31.72 31.72 0 0 0 1.214 8.237 1.25 1.25 0 0 0 2.405-.688c-.7-2.45-1.08-4.995-1.12-7.59a1.25 1.25 0 1 0-2.5.04zm4.543 15.88a31.909 31.909 0 0 0 5.197 6.505 1.25 1.25 0 0 0 1.734-1.802 29.442 29.442 0 0 1-4.79-5.995 1.25 1.25 0 0 0-2.139 1.291zm11.9 11.444a31.649 31.649 0 0 0 7.763 3.023c.67.162 1.347-.25 1.51-.92a1.249 1.249 0 0 0-.918-1.51 29.07 29.07 0 0 1-7.147-2.784 1.25 1.25 0 0 0-1.208 2.19z' fill='%23FFF' fill-rule='nonzero'/%3E%3Cpath d='M19.838 34.99c0 4.39 3.297 7.265 7.35 7.265 2.437 0 4.39-1.008 5.776-2.54v-5.25h-6.636v2.162h4.178v2.184c-.63.59-1.89 1.26-3.317 1.26-2.774.002-4.832-2.14-4.832-5.08s2.058-5.062 4.83-5.062c1.576 0 2.9.82 3.634 1.87l2.015-1.134c-1.134-1.617-2.92-2.92-5.65-2.92-4.052 0-7.35 2.857-7.35 7.245zm15.487 6.992h2.457V27.977h-2.456v14.007zm5.24 0h2.457v-6.047h6.992v-2.163h-6.992V30.14l7.14-.002v-2.163h-9.597v14.008z' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");background-size:70px 70px;background-position:50%;background-repeat:no-repeat;pointer-events:none}.slides .Lead:after,.slides .Lead:before{display:none}.ios{max-width:100vw}.fb_iframe_widget iframe,.fb_iframe_widget span{width:100%!important}.FootnoteHost{position:absolute;z-index:200;right:0;left:0;top:0;margin:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:transform .15s ease-out,opacity .15s ease-out;transition:transform .15s ease-out,opacity .15s ease-out,-webkit-transform .15s ease-out;-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0);pointer-events:none;opacity:0}.footnoteActive .FootnoteHost{-webkit-transform:translateZ(0);transform:translateZ(0);pointer-events:auto;opacity:1}.IIV::-webkit-media-controls-play-button,video::-webkit-media-controls-start-playback-button{opacity:0;pointer-events:none;width:5px}
/*# sourceMappingURL=styles.c321d1a91b89054d28d6a5f633eed0c4.css.map*/</style>
</head>
<body class="slides">
<figure class="NewFigure NewFigure--isInSlide">
<div class="NewFigure-object">
<video playsinline muted loop poster="https://second.meduza.io/videos/CrZrVo7lNFdHXcZqgp_KKg.gif" data-gif="https://second.meduza.io/videos/xvw9oeCRX6zti-xhkQa8Mw.gif">
<source src="http://broken-links.com/tests/media/BigBuck.m4v" type="video/mp4">
<div>
<img src="https://second.meduza.io/videos/xvw9oeCRX6zti-xhkQa8Mw.gif">
</div>
</video>
</div>
<figcaption class="NewFigure-caption">
<div class="NewFigure-title">Title</div>
<div class="NewFigure-credits">Credit</div>
</figcaption>
</figure>
<div class="FootnoteHost" id="user-footnote"></div>
<script>
Meduza = Meduza.default;
Meduza.detectIos();
Meduza.setFontSize(parseInt("%%font_size%%", 10));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment