function getVideoOverlay(page) { var links = embeds.filter(function(embed) { return embed.page == page && embed.type =='inline'; }); return (editable || links.length) ? { beginLayout: function() { this.counter = 0; }, endLayout: function() { }, appendImage: function(image) { var id = ++this.counter, video = links.filter(function(embed) { return embed.id == id; })[0], $interface, $playButton, $editButton; if (editable || video) { $interface = Ox.$('
') .addClass('interface') .css({ left: image.left + 'px', top: image.top + 'px', width: image.width + 'px', height: image.height + 'px' }); $playButton = Ox.$('') .addClass('button playButton') .attr({ src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjU2LDMyIDI0OCwxMjggNTYsMjI0IiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+PCEtLXsiY29sb3IiOiJ2aWRlbyIsIm5hbWUiOiJzeW1ib2xQbGF5IiwidGhlbWUiOiJveGRhcmsifS0tPg==' }) .hide() .appendTo($interface); $editButton = Ox.$('') .addClass('button editButton') .attr({ src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjMyLDIyNCA2NCwxNjAgOTYsMTkyIiBmaWxsPSIjRkZGRkZGIi8+PGxpbmUgeDE9Ijg4IiB5MT0iMTY4IiB4Mj0iMTg0IiB5Mj0iNzIiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI0OCIvPjxsaW5lIHgxPSIxOTIiIHkxPSI2NCIgeDI9IjIwOCIgeTI9IjQ4IiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMTEyIiB5MT0iMjIwIiB4Mj0iMjI0IiB5Mj0iMjIwIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iOCIvPjxsaW5lIHgxPSIxMjgiIHkxPSIyMDQiIHgyPSIyMjQiIHkyPSIyMDQiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI4Ii8+PGxpbmUgeDE9IjE0NCIgeTE9IjE4OCIgeDI9IjIyNCIgeTI9IjE4OCIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjgiLz48L3N2Zz4=', title: 'Click to add video' }) .on({click: edit}) .hide() .appendTo($interface); if (editable) { $editButton.show(); } if (video) { enableVideoUI(); } this.div.appendChild($interface[0]); Ox.Message.bind(function(event, data, oxid) { if (event == 'update') { if(Ox.isUndefined(oxid) && video && data.id == video.id && data.page == video.page) { video.src = data.src; video.src !== '' ? enableVideoUI() : disableVideoUI(); } } }); } function play(e) { e.preventDefault(); e.stopPropagation(); var videoId = 'video' + page + id + Ox.uid(), $iframe = Ox.$('