подгрузка изображения на 58 строке

videosign.js

/**
 * Add signs to videos
 * Фрейм с видео должен содержать класс "video--signed" и находиться в блоке контейнера ```<div class="video-container">```. При добавлении видео необходимо указать атрибут фрейма ```fs="0"```, чтобы не срабатывал полноэкранный режим фрейма.
 * Параметры прописываются в виде data-* атрибутов фрейма с видео.
 * Параметры:
 * - data-sign-opacity - прозрачность от 0 до 1
 * - data-sign-color - цвет в любом формате CSS
 * - data-sign-font-size - размер шрифта
 * - data-sign-text - текст
 */

(function() {
	'use strict';
	window.addEventListener('load', onPlayerReady);
	window.is_fullscreen_custom = false;
	var prefix = (function () {
		var styles = window.getComputedStyle(document.documentElement, ''),
			pre = (Array.prototype.slice
				.call(styles)
				.join('')
				.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
			)[1],
			dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
		return {
			dom: dom,
			lowercase: pre,
			css: '-' + pre + '-',
			js: pre[0].toUpperCase() + pre.substr(1)
		};
	})();
	function onPlayerReady() {
		document.querySelectorAll(".video--signed").forEach(function (video) {
			const height = video.offsetHeight;
			const width = video.offsetWidth;
			let video_container = video.parentNode;
			video_container.width=width;
			video_container.height=height;

			// make prefixed fullscreen api availible
			document.exitFullscreenCustom = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen;
			video_container.requestFullScreenCustom = video_container.requestFullscreen || video_container.msRequestFullscreen || video_container.mozRequestFullScreen || video_container.webkitRequestFullscreen;

			video_container.ondblclick = function () {
				video_container.requestFullScreenCustom();
			};
			let sign = document.createElement("span");
			sign.textContent = video.dataset.signText === undefined ? "some@email.com" : video.dataset.signText;
			sign.style.position = "absolute";
			sign.style.color = video.dataset.signColor === undefined ? "blue" : video.dataset.signColor;
			sign.style.fontSize = video.dataset.signFontSize === undefined ? "16px" : video.dataset.signFontSize;
			sign.style.opacity = video.dataset.signOpacity === undefined ? "1" : video.dataset.signOpacity;

			video_container.appendChild(sign);
			set_signs(video, sign);
			move_sign(sign, video);

			let fullscreen = document.createElement("img");
			fullscreen.src = 'fullscreen.png';
			fullscreen.style.position = "absolute";
			fullscreen.className = 'fullscreen-button';
			fullscreen.onclick = function () {
				let is_fullscreen = window.is_fullscreen_custom;
				if (is_fullscreen) {
					document.exitFullscreenCustom();
					video.style.margin = "";
					setTimeout(function () {
						video_container.width  = video.width = width;
						video_container.height = video.height = height;
						set_fullscreens(video, fullscreen);
						set_signs(video, sign);
						window.is_fullscreen_custom = false;
					}, 200);
				} else {
					video_container.requestFullScreenCustom();
					video.style.margin = "0";
					setTimeout(function () {
						window.is_fullscreen_custom = true;
						video_container.width = window.innerWidth;
						video.width = window.innerWidth;
						video_container.height = window.innerHeight;
						video.height = window.innerHeight;
						set_fullscreens(video, fullscreen);
						set_signs(video, sign);
					}, 200);
				}
			}
			video_container.appendChild(fullscreen);
			set_fullscreens(video, fullscreen);
			document.addEventListener(prefix.lowercase+"fullscreenchange", function( e ) {
				let is_fullscreen = window.is_fullscreen_custom;
				if ( is_fullscreen ) {
					setTimeout(function () {
						window.is_fullscreen_custom = false;
						video_container.width  = video.width = width;
						video_container.height = video.height = height;
						video.style.margin = "";
						set_fullscreens(video, fullscreen);
						set_signs(video, sign);
					}, 100);
				}

			});
		});
	}

	function set_fullscreens(video, fullscreen) {
		if (window.is_fullscreen_custom === true) {
			fullscreen.style.left = "";
			fullscreen.style.top = "";
			fullscreen.style.right = "0";
			fullscreen.style.bottom = "0";
			fullscreen.style.transform = "";

		} else {
			fullscreen.style.left = video.offsetLeft + video.offsetWidth + "px";
			fullscreen.style.top = video.offsetTop + video.offsetHeight + "px";
			fullscreen.style.transform = "translate(-100%, -100%)";

		}
	}

	function set_signs(video, sign) {
		if (video.className.indexOf("sign-right") !== -1) {
			sign.style.transform = "rotateZ(90deg)";
			sign.style.left = video.offsetLeft + video.offsetWidth - sign.offsetWidth/2 + "px";
			sign.style.top = video.offsetTop + video.offsetHeight/2 + "px";
		} else if (video.className.indexOf("sign-left") !== -1) {
			sign.style.transform = "rotateZ(-90deg)";
			sign.style.left = video.offsetLeft - sign.offsetWidth/2 + "px";
			sign.style.top = video.offsetTop + video.offsetHeight/2 + "px";
		} else if (video.className.indexOf("sign-center") !== -1) {
			// sign.style.transform = "translate(-50%, -50%)";
			sign.style.left = video.offsetLeft + video.offsetWidth/2 + "px";
			sign.style.top = video.offsetTop + video.offsetHeight/2 + "px";
		} else {
			sign.style.top = video.offsetTop + "px";
			sign.style.left = video.offsetLeft + "px";
		}
	}
	/**
	 * Перемещает надпись в случайную точку со скоростью 1px в 50мс в пределах видео
	 * @param  {DOM} sign  Объект надписи
	 * @param  {DOM} video Объект видео
	 */
	function move_sign(sign, video) {
		let x = sign.offsetLeft;
		let y = sign.offsetTop;
		let is_fullscreen = window.is_fullscreen_custom;
		const sign_height = sign.style.transform.indexOf("90") !== -1 ? sign.offsetWidth : sign.offsetHeight;
		const sign_width = sign.style.transform.indexOf("90") !== -1 ? sign.offsetHeight : sign.offsetWidth;
		setInterval(function () {
			if ((Math.abs(x - sign.offsetLeft) * Math.abs(y - sign.offsetTop) === 0) || is_fullscreen !== window.is_fullscreen_custom) {
				x = Math.trunc(Math.random()*(video.offsetWidth - sign_width*2) + video.offsetLeft + sign_width);
				y = Math.trunc(Math.random()*(video.offsetHeight - sign_height*2) + video.offsetTop + sign_height);
			}
			if (x > sign.offsetLeft) {
				sign.style.left = sign.offsetLeft + 1 + "px";
			} else if (x < sign.offsetLeft) {
				sign.style.left = sign.offsetLeft - 1 + "px";
			}
			if (y > sign.offsetTop) {
				sign.style.top = sign.offsetTop + 1 + "px";
			} else if (y < sign.offsetTop) {
				sign.style.top = sign.offsetTop - 1 + "px";
			}
			is_fullscreen = window.is_fullscreen_custom;
		}, 50);
	}

}());
// var p = document.createElement('p');
// p.style.position = "fixed";
// p.style.top = 0;
// p.style.left = 0;
// p.style.backgroundColor = "white";
// document.body.appendChild(p)
// window.onmousemove = function (e) {
// 	p.textContent = (e.clientX + window.scrollX) + ' , ' + (e.clientY + window.scrollY);
// }