full screen vimeo embed with iframe and Background Image on End

vimeo_fullscreen_video.html

<script src="https://player.vimeo.com/api/player.js"></script>
<div id="top">
	<div id="video-container">
		<iframe id="tv-iframe" width="100%" height="100%" src="https://player.vimeo.com/video/323429785?autoplay=1&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
		<div id="tv-replay"onclick="play_dtp_video(event)"></div>
	</div>
</div>

<script>
	var player;
	function $id(elementId) {
		return document.getElementById(elementId);
	}
	function init(){
		if (!window.Vimeo){
			setTimeout(init, 400);
			return;
		}
		var iframe = document.getElementById('tv-iframe');
		player = new window.Vimeo.Player(iframe);
		player.on('ended', function() {
			dd('ended');
			$id('tv-replay').style.display = 'block';
			$id('tv-iframe').style.opacity = 0;
			player.setCurrentTime(0);
		});
	}
	function play_dtp_video(event) {
		event.preventDefault();
		$id('tv-iframe').style.opacity = 1;
		event.target.style.display = 'none';
		player.setCurrentTime(0);
		player.play();
	}
	function toggle_pause_mobile(event) {
		// event.currentTarget.style.display = 'none';
		player.play();
		// player.on('')
	}

	init();
</script>

<style>
	#tv-replay {display:none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: url(/img/site/news/prowein2018.jpg) no-repeat center center; background-size:cover}
	#video-container {position:relative; overflow: hidden; width:100vw; height:100vh}
	#video-container iframe, .embed-container object, .embed-container embed {
		width: 100vw;
		height: 56.25vw;
		min-height: 100vh;
		min-width: 177.77vh;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>