How to edit the way videos appear when embedded on other sites?

drastic · April 20, 2023

Hi,

I'd like to add a text link under our videos that get embedded on other sites. Something like 'thanks for embedding this video, see more at blah blah blah'. Or we can put the title and link to video page under it - just something that helps generate clicks from sites who embed.

Doing this because it seems like the logo on video or playerbar is really hard to see for mobile users, so there's very little chance we get clicks back from people who use our videos - and mobile is like 70% of our traffic/userbase.

thx!

Tech Support · April 20, 2023

In Settings -> Embed player settings you can use the following Embed code template:

<html>
<head>
	<title>{{$data.title}}</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link href="{{$data.canonical_url}}" rel="canonical"/>
	{{if $data.description!=''}}
		<meta name="description" content="{{$data.description}}"/>
	{{/if}}
	{{if $data.tags_as_string!=''}}
		<meta name="keywords" content="{{$data.tags_as_string}}"/>
	{{/if}}
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<meta property="og:title" content="{{$data.title}}"/>
	<meta property="og:image" content="{{$flashvars.preview_url}}"/>
	<meta property="og:description" content="{{$data.description}}"/>

	<style type="text/css">
		/* related videos in player */
		.player-related-videos {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			padding: 5px 10px 30px 10px;
			background: #000000;
			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,
		.player-related-videos .player-related-videos-item:hover .duration {
			display: block;
		}

		.error-message {
			width: 100%;
			text-align: center;
			position: absolute;
			top: 49%
		}

		.bottom {
			font-family: Roboto, Arial, Helvetica, sans-serif;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			text-align: center;
			height: 20px;
			color: white;
		}

		.bottom a {
			color: white;
		}
	</style>
</head>
<body style="margin: 0; padding: 0; background: #000; color: #fff">
{{if $data.status_id==5}}
	<div class="error-message">{{$data.delete_reason|default:$lang.videos.video_player_not_allowed}}</div>
{{elseif $data.can_watch==0}}
	<div class="error-message">{{$lang.videos.video_player_not_allowed}}</div>
{{else}}
	{{if $data.load_type_id==3}}
		{{$data.embed|regex_replace:'/width="[0-9]+"/':'width="100%"'|regex_replace:'/height="[0-9]+"/':'height="100%"'|smarty:nodefaults}}
	{{elseif $flashvars_embed.video_url==''}}
		<div class="error-message">{{$lang.videos.video_player_not_allowed}}</div>
	{{else}}
		<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 20px"><div id="kt_player"></div></div>
		<script type="text/javascript" src="{{$config.statics_url}}/player/kt_player.js?v={{$config.project_version}}"></script>
		<script type="text/javascript">
			/* <![CDATA[ */
			function getEmbed() {
				var embedCode = '<iframe width="{{$player_size_embed[0]}}" height="{{$player_size_embed[1]}}" src="{{$config.project_url}}/embed/{{$data.video_id}}" frameborder="0" allowfullscreen>';
				embedCode += '</iframe>';
				return embedCode;
			}

			{{assign var="player_config_var" value=$smarty.now|md5|substr:0:10}}
			{{assign var="player_config_var" value="t`$player_config_var`"}}
			var {{$player_config_var}} = {
				{{foreach name="data" key="key" item="item" from=$flashvars_embed}}
					{{$key}}: '{{$item|replace:"'":"\'"}}'{{if !$smarty.foreach.data.last}}, {{/if}}
				{{/foreach}}
			};
			{{if $smarty.request.skin=='black'}}
				{{$player_config_var}}['skin'] = 'dark.css';
			{{elseif $smarty.request.skin=='white'}}
				{{$player_config_var}}['skin'] = 'white.css';
			{{/if}}
			{{if $smarty.request.autoplay=='true' || $smarty.request.autoplay=='1'}}
				{{$player_config_var}}['autoplay'] = 'true';
			{{elseif $smarty.request.autoplay=='false' || $smarty.request.autoplay=='0'}}
				{{$player_config_var}}['autoplay'] = 'false';
			{{/if}}

			window['player_obj'] = kt_player('kt_player', '{{$config.statics_url}}/player/kt_player.swf?v={{$config.project_version}}', '100%', '100%', {{$player_config_var}});
			/* ]]> */
		</script>
	{{/if}}
{{/if}}
<div class="bottom">See more at <a href="{{$config.project_url}}">{{$config.project_url}}</a></div>
</body></html>

Sign In

How to edit the way videos appear when embedded on other sites?

Recommended Posts

drastic

Link to comment

Share on other sites

Tech Support

Link to comment

Share on other sites

Join the conversation

Forum

Activity

Support