Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
| videos:trade-free:you-are-free [2020/02/28 08:01] – alexio | videos:trade-free:you-are-free [2021/10/30 11:41] (current) – external edit 127.0.0.1 | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ==== you are free ==== | ==== you are free ==== | ||
| - | < | + | | {{youtube> |
| - | <script type=" | + | | [[https:// |
| - | // embedder-iframe.js | + | |
| - | // | + | |
| - | // This is the JS that gets loaded by external sites to enable the embedder. | + | |
| - | // To maintain backwards compatibility, | + | |
| - | // https:// | + | |
| - | // directory rather than assets. | + | |
| - | (function() | + | |
| - | // This must be done when the js file is first loaded | + | |
| - | var scriptFiles = document.getElementsByTagName(" | + | |
| - | var THIS_JS_FILE = scriptFiles[scriptFiles.length-1].src; | + | |
| - | + | ||
| - | // Map iframe names to the HTMLIFrameElements | + | |
| - | var iframeCounter = 0; | + | |
| - | var iframeMap = {}; | + | |
| - | + | ||
| - | if (window.amaraEmbedderLoaded == undefined) { | + | |
| - | window.amaraEmbedderLoaded = true; | + | |
| - | } else { | + | |
| - | return; | + | |
| - | } | + | |
| - | + | ||
| - | function findNewEmbedDivs() { | + | |
| - | var embeds = document.getElementsByClassName(" | + | |
| - | for(var i = 0; i < embeds.length; | + | |
| - | if(embeds[i].dataset.amaraEmbed === undefined) { | + | |
| - | embeds[i].dataset.amaraEmbed = true; | + | |
| - | createEmbedder(embeds[i]); | + | |
| - | } | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | function createEmbedder(elt) { | + | |
| - | var iframe = document.createElement(" | + | |
| - | var data = calcData(elt); | + | |
| - | setupWidthAndPaddingTop(elt, | + | |
| - | elt.style.height = " | + | |
| - | elt.style.position = " | + | |
| - | elt.style.boxSizing = " | + | |
| - | iframe.src = createUrl('/ | + | |
| - | iframe.style.position = " | + | |
| - | iframe.style.left = " | + | |
| - | iframe.style.top = " | + | |
| - | iframe.style.width = " | + | |
| - | iframe.style.height = " | + | |
| - | iframe.style.border = " | + | |
| - | iframe.style.overflow = " | + | |
| - | iframe.scrolling = " | + | |
| - | iframe.setAttribute(" | + | |
| - | iframe.name = ' | + | |
| - | elt.appendChild(iframe); | + | |
| - | iframeMap[iframe.name] = iframe; | + | |
| - | addLoadingBackground(elt); | + | |
| - | | + | |
| - | + | ||
| - | function setupWidthAndPaddingTop(elt, | + | |
| - | // Set the width/ | + | |
| - | // The idea here is to make paddingTop equal to the height of the video | + | |
| - | // player. | + | |
| - | // proportional to the width when the width is 100% (see the else case | + | |
| - | // below). | + | |
| - | // the other elements (toolbar and optionally the transcript viewer). | + | |
| - | if(data.width) { | + | |
| - | // Manual width specified, set the height to exactly 9/16th of this. | + | |
| - | if(data.width.match(/ | + | |
| - | elt.style.width = parseInt(data.width, | + | |
| - | | + | |
| - | elt.style.width = data.width; | + | |
| - | } | + | |
| - | var height = Math.round(elt.getBoundingClientRect().width * 9 / 16); | + | |
| - | elt.style.paddingTop = height + ' | + | |
| - | } else { | + | |
| - | // No width specified, set the height to 56.25%, which will make it | + | |
| - | // 9/16ths of the container width. | + | |
| - | elt.style.width = " | + | |
| - | elt.style.paddingTop = " | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | function calcData(elt) { | + | |
| - | var data = {}; | + | |
| - | for(var i = 0; i < elt.attributes.length; | + | |
| - | var attr = elt.attributes[i]; | + | |
| - | if(attr.name.startsWith(' | + | |
| - | var name = attr.name.substring(5).replace(/ | + | |
| - | var value = attr.value; | + | |
| - | if(value == " | + | |
| - | value = false; | + | |
| - | } else if(value == " | + | |
| - | value = true; | + | |
| - | } else if(value == " | + | |
| - | value = null; | + | |
| - | } | + | |
| - | data[name] = value; | + | |
| - | } | + | |
| - | } | + | |
| - | return data; | + | |
| - | } | + | |
| - | + | ||
| - | function formatData(data) { | + | |
| - | return encodeURIComponent(JSON.stringify(data)); | + | |
| - | } | + | |
| - | + | ||
| - | + | ||
| - | function addLoadingBackground(elt) { | + | |
| - | elt.style.backgroundColor = '# | + | |
| - | elt.style.backgroundImage = ' | + | |
| - | elt.style.backgroundPosition = ' | + | |
| - | elt.style.backgroundRepeat = ' | + | |
| - | } | + | |
| - | + | ||
| - | function adjustHeight(iframe, | + | |
| - | var container = iframe.parentNode; | + | |
| - | if(transcriptEnabled) { | + | |
| - | container.style.height = " | + | |
| - | } else { | + | |
| - | container.style.height = " | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | function amaraDomain() { | + | |
| - | var parser = document.createElement(' | + | |
| - | parser.href = THIS_JS_FILE; | + | |
| - | return parser.protocol + '//' | + | |
| - | } | + | |
| - | + | ||
| - | function createUrl(path) { | + | |
| - | return amaraDomain() + path; | + | |
| - | } | + | |
| - | + | ||
| - | function onMessage(evt) { | + | |
| - | if(evt.origin != amaraDomain()) { | + | |
| - | return; | + | |
| - | } | + | |
| - | var iframe = iframeMap[evt.data.name]; | + | |
| - | if(evt.data.type == ' | + | |
| - | adjustHeight(iframe, | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | var amaraEmbedderInit = function() { | + | |
| - | window.addEventListener(' | + | |
| - | findNewEmbedDivs(); | + | |
| - | var nodesAddedAndRemovedCallback = function(records) { | + | |
| - | findNewEmbedDivs(); | + | |
| - | }; | + | |
| - | new MutationObserver(nodesAddedAndRemovedCallback).observe(document.body, | + | |
| - | }; | + | |
| - | window.amaraEmbedderInit = amaraEmbedderInit; | + | |
| - | + | ||
| - | window.addEventListener(' | + | |
| - | }).call(this); | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | < | + | |
| - | <div class=" | + | |
| - | </ | + | |
| - | + | ||
| - | [[https:// | + | |