theme Theme customization: how to show related videos from one project on another

[Tech Support]

If you have multiple tube sites on KVS, you can make related videos from one site to be part of another site. For example to render them as the first 3 related videos, or the last 3, or even as a separate list.

 

Configuring page to render related videos HTML code on source site

First you need to create a new page on source site (which videos you will take off). Go to Website UI -> Add page and create a new page with the following data:

• Display name: Related videos for <target site> (e.g. Related videos for kvs-demo.com)
• External ID: related_videos_for_<target_site> (e.g. related_videos_for_kvs_demo)
• Cache lifetime: 86400
• Template code:

  {{insert name="getBlock" block_id="list_videos" block_name="Related Videos"}}

   

Save this page and open it for editing. You will notice Related Videos block added to its block list. Open this block editor.

In Related Videos block editor scroll down to Search videos by text parameter group and enable var_search = q parameter. Also under List pagination group make sure that items_per_page parameter has the exact number of videos you want to pull.

In Template code you should render video items with template code that is needed for target site (e.g. kvs-demo.com in this example). The easiest way is to go to target site admin panel, go to its Website UI -> Page components -> include_list_videos_block_common.tpl and copy-paste everything within its primary {{foreach}} iteration. Here is what we copied from default theme:

{{foreach item="item" from=$data}}
   <div class="item {{if $item.is_private==1}}private{{elseif $item.is_private==2}}premium{{/if}}">
       <a {{if $item.view_page_url!=''}}href="{{$item.view_page_url}}"{{/if}} title="{{$item.title}}">
           <div class="img">
               {{if $item.status_id==0 || $item.status_id==1}}
                   <img class="thumb {{if $lang.enable_thumb_lazyload=='true'}}lazy-load{{/if}}" {{if $lang.enable_thumb_lazyload=='true'}}src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-original{{else}}src{{/if}}="{{$item.screen_url}}/{{$lang.videos.thumb_size}}/{{$item.screen_main}}.jpg" {{if $lang.videos.thumb_size_webp}}data-webp="{{$item.screen_url}}/{{$lang.videos.thumb_size_webp}}/{{$item.screen_main}}.jpg"{{/if}} alt="{{$item.title}}" {{if $lang.enable_thumb_scrolling=='true'}}data-cnt="{{$item.screen_amount}}"{{/if}} {{if $item.is_private==0 && $item.formats[$lang.videos.preview_video_format_standard].file_path!=''}}data-preview="{{$config.project_url}}/get_file/{{$item.server_group_id}}/{{$item.formats[$lang.videos.preview_video_format_standard].file_path}}/"{{/if}} {{if $item.is_private==2 && $item.formats[$lang.videos.preview_video_format_premium].file_path!=''}}data-preview="{{$config.project_url}}/get_file/{{$item.server_group_id}}/{{$item.formats[$lang.videos.preview_video_format_premium].file_path}}/"{{/if}} width="{{$lang.videos.thumb_size|geomsize:'width'}}" height="{{$lang.videos.thumb_size|geomsize:'height'}}"/>
               {{/if}}
               {{if $item.is_private==1}}
                   <span class="line-private"><span class="ico-private">{{$lang.videos.list_label_private}}</span></span>
               {{elseif $item.is_private==2}}
                   <span class="line-premium"><span class="ico-premium">{{$lang.videos.list_label_premium}}</span></span>
               {{/if}}
               {{if $item.is_hd==1}}<span class="is-hd">HD</span>{{/if}}
           </div>
           <strong class="title">
               {{if $lang.videos.truncate_title_to>0}}
                   {{$item.title|truncate:$lang.videos.truncate_title_to:"...":true}}
               {{else}}
                   {{$item.title}}
               {{/if}}
           </strong>
           <div class="wrap">
               <div class="duration">{{$item.duration_array.text}}</div>

               {{assign var="object_rating" value="`$item.rating/5*100`"}}
               {{if $object_rating>100}}{{assign var="object_rating" value="100"}}{{/if}}
               <div class="rating {{if $object_rating>=50 || $object_rating==0}}positive{{else}}negative{{/if}}">
                   {{$object_rating|string_format:"%d"}}%
               </div>
           </div>
           <div class="wrap">
               {{assign var="added_date" value=$item.post_date}}
               {{if $mode_favourites==1}}
                   {{assign var="added_date" value=$item.added2fav_date}}
               {{elseif $mode_purchased==1}}
                   {{assign var="added_date" value=$item.purchase_date}}
               {{/if}}
               <div class="added"><em>{{$added_date|date_format:$lang.global.date_format}}</em></div>
               <div class="views">{{$item.video_viewed|number_format:0:",":$lang.global.number_format_delimiter}}</div>
           </div>
       </a>
   </div>
{{/foreach}}

Finally make sure you also put 86400 cache lifetime in this block settings.

After saving block editor you can now check how it works (make sure to replace https://domain.com/related_videos_for_kvs_demo with your domain and page ID):

https://domain.com/related_videos_for_kvs_demo.php?q=Test video

If your database has something similar to "Test video", it should render several videos.

 

Pulling videos from target site

Now when the page is ready, go to target site admin panel. Locate page or block where you want to render this list (typically in Website UI -> Pages -> View Video -> Related Videos block or View Video page itself) and open it for editing.

In template code add this (make sure to replace https://domain.com/related_videos_for_kvs_demo with your domain and page ID):

{{php}}
$storage = $this->get_template_vars('storage');
if (function_exists('get_page') && $storage['video_view_video_view']['title']) {
echo get_page("", "https://domain.com/related_videos_for_kvs_demo.php?q=" . urlencode($storage['video_view_video_view']['title']), "", "", 1, 0, 3, "");
}
{{/php}}

Now refresh any of the video pages on target site and make sure that related videos from source site are displayed correctly. If they are displayed with wrong styling, make sure that template code from the previous section suits target site CSS styles and taken from target site, not from source site.

 

Video previews

Video previews will not work by default. The reason is anti-hotlink protection that is configured in Settings -> Content settings -> Video download script protection settings (because this is actually a hotlink, when you try to put links to video files from one site to another).

If you want to allow this, you have to change hotlink protection mode from IP to Referrer (less secure) and put your 2nd domain into whitelist:

Edited March 25, 2022 by Tech Support
Added Video previews section

[hbarnetworks]

is it also possible to show the entire album list on a different website?

[Tech Support]

Yes, why not. Same concept applies for albums as well.

[Diego12220]

thank you a loyt for the code you provided. really needed it

[xApster]

I just added this feature to my site but the related videos from my source site are not showing video previews ( which is enabled and working on the source site for normal related videos ).

Curious if there was anyway to enable video previews?

Thanks

[Tech Support]

Updated original post with Video previews section after investigation.