Jump to content

How to display some videos in 404 embed codes


Recommended Posts

By default KVS simply shows 404 error message on black screen when somebody is using embed code for a video that was deleted. The contents what is displayed for wrong / deleted embed codes can be customized in Settings -> Embed player settings under Error template field.

Here is the example of how you can configure it to display list of videos in addition to error message. Just use the code below as Error template:

<html>
<head>
	<title>{{$lang.error_404.title}}</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>

	<style type="text/css">
		@import "https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;subset=cyrillic";

		/* related videos in player */
		.player-related-videos {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			padding: 30px 10px 30px 10px;
			overflow: hidden;
		}
		.player-related-videos .player-related-videos-container {
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
			text-align: center;
		}
		.player-related-videos .player-related-videos-item {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			margin-top: 5px;
		}
		.player-related-videos .player-related-videos-item .title {
			display: none;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			height: 52px;
			overflow: hidden;
			text-align: left;
			padding: 5px;
			color: #ffffff;
			background: -moz-linear-gradient(top, rgba(12, 12, 12, 0.8) 0px, transparent 50px);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0px, rgba(12, 12, 12, 0.8)), color-stop(50px, transparent));
			background: -webkit-linear-gradient(top, rgba(12, 12, 12, 0.8) 0px, transparent 50px);
			background: -o-linear-gradient(top, rgba(12, 12, 12, 0.8) 0px, transparent 50px);
			background: -ms-linear-gradient(top, rgba(12, 12, 12, 0.8) 0px, transparent 50px);
			background: linear-gradient(to bottom, rgba(12, 12, 12, 0.8) 0px, transparent 50px);
		}
		.player-related-videos .player-related-videos-item .duration {
			display: none;
			position: absolute;
			bottom: 5px;
			right: 5px;
			color: #ffffff;
			background: rgba(12, 12, 12, 0.8);
			padding: 2px 5px;
		}
		.player-related-videos .player-related-videos-item:hover .title,
		.touch .player-related-videos .player-related-videos-item .title,
		.touch .player-related-videos .player-related-videos-item .duration,
		.player-related-videos .player-related-videos-item:hover .duration {
			display: block;
		}

		body {
			font: 400 14px/1.2 "Roboto", Helvetica, sans-serif;
		}

		body > div:first-child {
			top: 0 !important;
			padding-top: 5px;
		}
	</style>
</head>
<body style="margin: 0; padding: 0; background: #000; color: #fff">
<div style="width: 100%; text-align: center; position: absolute; top: 49%">{{$lang.error_404.title}}</div>
<script src="{{$config.statics_url}}/static/js/main.min.js"></script>
<script>
	if ('ontouchstart' in document) {
		$('body').addClass('touch');
	}
	$.ajax({
		url: '{{$config.project_url}}/related_videos_html/0/',
		type: 'GET',
		cache: false,
		success: function (html) {
			$('body').append($(html));
		}
	});
</script>
</body>
</html>

 

NOTE: this code is for KVS default theme. For other themes you may need to check which theme scripts you have in http://domain.com/static/js directory. If you have main.min.js file, this code will work. In other themes you may have vendors.min.js - then you need to replace this line:

<script src="{{$config.statics_url}}/static/js/main.min.js"></script>

with this one:

<script src="{{$config.statics_url}}/static/js/vendors.min.js"></script>

Finally if you neither have main.min.js nor vendors.min.js, you need to include JQuery library there.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...