theme Theme customization: how to build embed code for video playlist

Tech Support · May 18, 2019

KVS features embed player with a special settings page (Settings -> Embed player settings), where you can even modify template code, however you won't be able to render playlist info using that template.

In order to do that you should create a new page in Website UI section. This tutorial provides step by step instruction on how to do that.

1) Create a new page using Website UI page editor (Website UI -> Add page). Set any title you want, set External ID to embed_playlist, set Cache lifetime to 86400. Use the following template code:

{{insert name="getBlock" block_id="playlist_view" block_name="Playlist" assign="playlist_html"}}
{{insert name="getBlock" block_id="video_view" block_name="Video" assign="video_html"}}
<html>
<head>
   <title>{{$storage.video_view_video.title}} - {{$storage.playlist_view_playlist.title}}</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

   <link href="{{$storage.playlist_view_playlist.canonical_url}}" rel="canonical"/>
   {{if $storage.video_view_video.description!=''}}
       <meta name="description" content="{{$storage.video_view_video.description}}"/>
   {{/if}}
   {{if $storage.video_view_video.tags_as_string!=''}}
       <meta name="keywords" content="{{$storage.video_view_video.tags_as_string}}"/>
   {{/if}}
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <meta property="og:title" content="{{$storage.video_view_video.title}} - {{$storage.playlist_view_playlist.title}}"/>
   <meta property="og:image" content="{{$storage.video_view_video.preview_url}}"/>
   <meta property="og:description" content="{{$storage.video_view_video.description}}"/>

   <style type="text/css">
       /* playlist videos */
       .playlist {
           position: absolute;
           left: 10px;
           top: 10px;
           margin: 0;
           padding: 0;
           z-index: 252;
       }

       .playlist li {
           padding: 2px;
           margin: 0;
           list-style: none;
           color: #ffffff;
       }

       .playlist li a {
           color: inherit;
           text-decoration: none;
       }

       .playlist li.active {
           background: #ffffff;
           color: #000000;
       }

       /* 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%
       }
   </style>
</head>
<body style="margin: 0; padding: 0; background: #000; color: #fff">
{{$video_html|smarty:nodefaults}}
{{$playlist_html|smarty:nodefaults}}
</body></html>

NOTE: in order to create a new page with embed_playlist ID, you should either put 777 filesystem permissions to your website root, or copy /admin/tools/page_template.php to /embed_playlist.php manually. If you don't, KVS won't let you create this page in most cases.

Some brief explanation: we will use playlist_view block to render list of playlist videos as an <UL> component; and we will use video_view block to render embed player. We will use CSS absolute positioning with z-index manipulation to render playlist on top of embed player.

After you created this page, in Website UI -> Pages you will find this page created with 2 blocks:

2) Open Playlist block for editing. You will find that it is initialized with default template. Use the following template code for it to render list of videos in this playlist:

<ul class="playlist">
   {{foreach from=$data.videos item="item"}}
       <li {{if $item.video_id==$smarty.get.video_id}}class="active"{{/if}}><a href="{{$config.project_url}}/embed/{{$item.video_id}}?playlist_id={{$data.playlist_id}}">{{$item.title}}</a></li>
   {{/foreach}}
</ul>

Under parameters enable var_playlist_id = playlist_id (change its default value). You can also use sort_by parameter if you need to change default sorting of the playlist videos.

IMPORTANT! Make sure you put video_id into Dynamic HTTP parameters option. This is required to avoid caching issues with rendering this block for different videos.

3) Open Video block for editing. Use the following template code for it to render embed player code:

{{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="width: 100%; height: 100%;"><div id="kt_player"></div></div>
       <script type="text/javascript" src="{{$config.project_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}}?playlist_id={{$smarty.get.playlist_id}}" frameborder="0" allowfullscreen>';
               embedCode += '</iframe>';
               return embedCode;
           }

           var flashvars = {
               {{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'}}
               flashvars['skin'] = 'dark.css';
           {{elseif $smarty.request.skin=='white'}}
               flashvars['skin'] = 'white.css';
           {{/if}}
           {{if $smarty.request.autoplay=='true' || $smarty.request.autoplay=='1'}}
               flashvars['autoplay'] = 'true';
           {{elseif $smarty.request.autoplay=='false' || $smarty.request.autoplay=='0'}}
               flashvars['autoplay'] = 'false';
           {{/if}}

           kt_player('kt_player', '{{$config.project_url}}/player/kt_player.swf?v={{$config.project_version}}', '100%', '100%', flashvars);
           /* ]]> */
       </script>
   {{/if}}
{{/if}}

Under parameters enable var_video_id = video_id (change its default value).

4) The page is fully functional now. The final step it to make sure its URL is working. In order to do that we need to modify URL rewrites in the main .htaccess file.

By default KVS uses the following URLs for single video embed codes:

https://www.kvs-demo.com/embed/38

The idea is to add playlist_id parameter to single embed URLs to get playlist embed URLs:

https://www.kvs-demo.com/embed/38?playlist_id=1

So in .htaccess we need to add the following rule - if request URI is standard embed code pattern (^embed/(.+)$) AND there is a playlist_id parameter given, then render it as a playlist embed code. In order to specify this, put the following code into the beginning of .htaccess file:

RewriteCond %{QUERY_STRING} playlist_id=([0-9]+)
RewriteRule ^embed/(.+)$ embed_playlist.php?video_id=$1 [L,QSA]

Finally, all pieces are in place and you can see how it works: https://www.kvs-demo.com/embed/38?playlist_id=1

And the same video without playlist: https://www.kvs-demo.com/embed/38

You can find this page coded in demo admin panel at this URL: https://kvs-demo.com/admin/project_pages.php?action=change&item_id=embed_playlist

Sign In

theme Theme customization: how to build embed code for video playlist

Recommended Posts

Tech Support

Link to comment

Share on other sites

Join the conversation

Forum

Activity

Support