<div class="top-video video-player-page">
    <div class="row">
        <div id="background" class="hidden"></div>
        <div class="play-list-player">
          <div class="col-md-8 player-video no-padding-right">
            <div class="video-player {{USR_AD_TRANS}}">
              <?php if ($pt->converted === true): ?>
                <?php if (!empty($pt->get_video->vimeo)) {?>
                    <iframe src="https://player.vimeo.com/video/{{VIDEO_ID}}?api=1;title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1" width="100%" height="500" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
                <?php } else if (!empty($pt->get_video->daily)) { ?>
                    <iframe frameborder="0" width="100%" height="500" src="//www.dailymotion.com/embed/video/{{VIDEO_ID}}?PARAMS" allowfullscreen></iframe>
                <?php } else { ?>
                    <video id="my-video" controls <?php if (empty($pt->ad_image)) { ?> autoplay <?php } ?> style="width:100%; height:100%;" poster="{{THUMBNAIL}}" >
                       <?php if (!empty($pt->video_720)) { ?>
                       <source src="{{VIDEO_LOCATION_720}}" type="{{VIDEO_TYPE}}" data-quality="720p">
                       <?php } ?>
                       <?php if (!empty($pt->video_480)) { ?>
                       <source src="{{VIDEO_LOCATION_480}}" type="{{VIDEO_TYPE}}" data-quality="480p">
                       <?php } ?>
                       <source src="{{VIDEO_LOCATION}}" type="{{VIDEO_TYPE}}" data-quality="360p">
                       <?php if (!empty($pt->video_240)) { ?>
                       <source src="{{VIDEO_LOCATION_240}}" type="{{VIDEO_TYPE}}" data-quality="240p">
                       <?php } ?>
                       <!-- //src="http://www.youtube.com/watch?v=nOEw9iiopwI" type="video/youtube" -->
                    </video>
                     <?php if (!empty($pt->ad_image)) { ?>
                     <a href="{{AD_P_LINK}}" class="ad-link" target="_blank">
                        <div class="ad-image">
                           <div class="ads-test"><i class="fa fa-bullhorn"></i> Advertisement will close in <span class="timer">(<span>{{AD_SKIP_NUM}}</span>)</span></div>
                           <img src="{{AD_IMAGE}}" alt="Ads">
                        </div>
                      </a>
                     <?php } ?>
                    <?php if ($pt->config->resize_video == 'on') { ?>
                     <div class="icons hidden">
                       <span class="expend-player"><i class="fa fa-expand fa-fw"></i></span>
                     </div>
                     <?php } ?>
                <?php } ?>
                 
                {{USER_ADS_DESC_OVERLAY}}
              <?php else: ?>
                <div class="video-processing">
                  <img src="{{THUMBNAIL}}" alt="" style="width: 100%;">
                  <div>
                    <h5>
                      <p><i class="material-icons spin">settings</i></p>
                      <?php if (!empty($pt->video_owner)): ?>
                        {{LANG ur_video_porcessing}}
                      <?php else: ?>
                        {{LANG this_video_porcessing}}
                      <?php endif; ?>
                    </h5>
                  </div>
                </div>
              <?php endif; ?>      
            </div>
            <div class="clear"></div>
          </div>
          <div class="col-md-4 no-padding-left pull-right  play-list-cont-wrapper col-xs-12">

              <div class="content play-list-container">
                  <div class="next-video">
                    <div class="next-text pull-left" >
                      <h4 style="color: #f2f2f2; font-size: 14px; margin-bottom: 0px">
                        <i class="fa fa-play fa-fw" aria-hidden="true"></i> {{LIST_NAME}} - {{LIST_OWNERNAME}}
                      </h4>
                    </div>
                    <div class="checkbox checkbox-info pull-right" style="color: #f2f2f2; font-size: 14px;">
                      {{VID_INDEX}} / {{LIST_COUNT}}
                    </div>
                    <div class="clear"></div>
                  </div>
                  <div class="videos-list play-list-cont" id="next-video">{{LIST_SIDEBAR}}</div>
              </div>
          </div>
          <div class="clear"></div>
        </div>
        
        <div class="col-md-8 ">
            <div class="content pt_shadow">
                <div class="video-title pt_video_info">
                    <input type="hidden" value="{{ID}}" id="video-id">
                    <div class="video-big-title">
                        <h1 itemprop="title">{{TITLE}}</h1>
                    </div>

          <div>
            <div class="video-likes pull-right">
                            <div class="like-btn {{LIKE_ACTIVE_CLASS}}" id="likes-bar" onclick="Wo_LikeSystem('{{ID}}', 'like', this, 'is_ajax')" data-likes="{{RAEL_LIKES}}" {{ISLIKED}}>
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg> <span class="likes" id="likes">{{LIKES}}</span>
                            </div>
              <div class="video-info-element pull-right">
                <div class="views-bar" style="width: {{DISLIKES_P}}%"></div>
                <div class="views-bar blue" style="width: {{LIKES_P}}%"></div>
                <div class="clear"></div>
              </div>
                            <div class="like-btn text-right {{DIS_ACTIVE_CLASS}}" id="dislikes-bar" onclick="Wo_LikeSystem('{{ID}}', 'dislike', this, 'is_ajax')" data-likes="{{RAEL_DISLIKES}}" {{ISDISLIKED}}>
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-down"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg> <span class="likes" id="dislikes">{{DISLIKES}}</span>
                            </div>
                            <div class="clear"></div>
            </div>
          </div>
          <div class="video-views">
            {{VIEWS}} {{LANG views}}
          </div>
          
                    <div class="publisher-element pull-left">
                        <div class="publisher-avatar pull-left hide-in-mobile-720">
                            <a href="{{USER url}}"><img src="{{USER avatar}}" alt="{{USER name}}"></a>
                        </div>
                        <div class="publisher-name">
                            <a href="{{USER url}}">{{USER name_v}}</a>
                        </div>
                        <div class="publisher-subscribe-button">
                            {{SUBSCIBE_BUTTON}}
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
          
                    <div class="video-options">
                        <button class="btn-share" id="share-video">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg> {{LANG share}}
                        </button>
                        <?php if ($pt->config->embed_system == 'on') {?>
                        <button class="btn-share" id="embed-video">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg> {{LANG embed}}
                        </button>
                        <?php } ?>
            <?php if ($pt->get_video->is_owner == true) { ?>
            <a class="btn btn-share" href="{{LINK edit-video/{{ID}}}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><polygon points="16 3 21 8 8 21 3 21 3 16 16 3"></polygon></svg> {{LANG edit_video}}</a> 
            <?php } ?>
                        <?php if (IS_LOGGED): ?>
              <?php if ($pt->reported === true): ?>
                <button class="btn-share btn-report active pull-right" onclick="PT_ReportVideo('{{ID}}',this);" data-rep="0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-flag"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>
                  <span>{{LANG cancel_report}}</span>
                </button>
              <?php else: ?>
                <button class="btn-share btn-report pull-right" onclick="PT_ReportVideo('{{ID}}',this);" data-rep="1">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-flag"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>
                  <span>{{LANG report}}</span>
                </button>
              <?php endif; ?>
              <button class="btn-share pull-right" onclick="PT_AddToList('{{ID}}');">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> {{LANG add_to}}
              </button>
                        <?php endif; ?>
                        <div class="embed-placement hidden">
                           <textarea name="embed" id="embed" cols="30" rows="3" class="form-control"><iframe src="{{LINK embed/{{VIDEO_MAIN_ID}}}}" frameborder="0" width="700" height="400" allowfullscreen></iframe></textarea>
                        </div>
                        <div class="share-video hidden">
                           <a href="#" class="fa fa-facebook" onclick="OpenShareWindow('https://www.facebook.com/sharer/sharer.php?u={{ENCODED_URL}}')"></a>
                           <a href="#" class="fa fa-twitter" onclick="OpenShareWindow('https://twitter.com/home?status={{ENCODED_URL}}')"></a>
                           <a href="#" class="fa fa-google" onclick="OpenShareWindow('https://plus.google.com/share?url={{ENCODED_URL}}')"></a>
                           <a href="#" class="fa fa-linkedin" onclick="OpenShareWindow('https://www.linkedin.com/shareArticle?mini=true&url={{ENCODED_URL}}&title={{TITLE}}')"></a>
                           <a href="#" class="fa fa-pinterest" onclick="OpenShareWindow('https://pinterest.com/pin/create/button/?url={{ENCODED_URL}}&media={{THUMBNAIL}}')"></a>
                           <a href="#" class="fa fa-tumblr" onclick="OpenShareWindow('http://www.tumblr.com/share/link?url={{ENCODED_URL}}')"></a>
                           <a href="#" class="fa fa-reddit" onclick="OpenShareWindow('http://www.reddit.com/submit?url={{ENCODED_URL}}')"></a>
                           <?php if (!empty($pt->config->wowonder_domain_uri) && $pt->config->wowonder_img) {?> <a href="#" class="share-third" onclick="OpenShareWindow('{{CONFIG wowonder_domain_uri}}/sharer?url={{ENCODED_URL}}')"><img src="{{CONFIG wowonder_img}}" alt="share to "></a> <?php } ?>
                           <a href="#" onclick="copyToClipboard(this)" class="fa fa-link" link="{{URL}}"></a>
                        </div>
                    </div>
                    
                    <div class="video-published">
                        {{LANG published_on}} {{TIME}} / {{LANG in}} <a href="{{LINK videos/category/{{CATEGORY_ID}}}}">{{CATEGORY}}</a>
                    </div>
                    <div class="watch-video-description">
                        <p dir="auto" itemprop="description">{{DESC}}</p>
                    </div>
                    <div class="watch-video-show-more desc">
                        {{LANG show_more}}
                    </div>
                </div>
            </div>
            <div class="ads-placment">{{COMMENT_AD}}</div>
            {{VIDEO_COMMENTS}}
        </div>
        <div class="col-md-4 no-padding-left pull-right">
            <div class="content">
                <div class="ads-placment">{{WATCH_SIDEBAR_AD}}</div>
                <div class="videos-list related-videos">{{VIDEO_SIDEBAR}}</div>
                <div class="load-related-videos">
                  <button class="btn btn-default" id="load-related-videos">
                    <span>{{LANG load_more}}</span><i class="fa fa-circle-o-notch spin hidden"></i>
                  </button>
                </div>
            </div>
        </div>
       <div class="clear"></div>
    </div>
</div>
<script>
jQuery(document).ready(function($) {
  $('.rad-transaction').click(function(event) {
    $(this).off("click").removeClass('rad-transaction');
    $.get('{{LINK aj/ads/rad-transaction}}', function(data){ /* pass */ });
  });
  
  $("#load-related-videos").click(function(event) {
    let id = 0;
    if ($("div[data-sidebar-video]").length > 0) {
      id = $("div[data-sidebar-video]").last().attr('data-sidebar-video');
    }

    $("#load-related-videos").find('i.spin').removeClass('hidden');

    $.ajax({
      url: '{{LINK aj/load-related-videos}}',
      type: 'GET',
      dataType: 'json',
      data: {id: id,video_id:'{{ID}}'},
    })
    .done(function(data) {
      if (data.status == 200) {
        $(".related-videos").append(data.html);
      }
      else{
        $("#load-related-videos").find('span').text('{{LANG no_more_videos}}');
      }
      $("#load-related-videos").find('i.spin').addClass('hidden');

    });
  });
});
$('.ad-link').on('click', function(event) {
  $('.ad-link').remove();
  $('#my-video')[0].play();
});
<?php if (!empty($pt->ad_image)) { ?>
var counter = {{AD_SKIP_NUM}};
var interval = setInterval(function() {
    counter--;
    $('.timer span').text(counter);
    if (counter == 0) {
        $('.ad-link').remove();
        $('#my-video')[0].play();
        clearInterval(interval);
    }
}, 1000);
<?php } ?>
$('#autoplay').on('change', function(event) {
  event.preventDefault();
  checked = 1;
  if($(this).is(":checked")) {
    checked = 2;
  }
  $.post('{{LINK aj/set-cookies}}', {name: 'autoplay', value: checked});
});
$('.ads-test').on('click', function(event) {
  $(this).remove();
});


$(function () {

   $(".play-list-cont-wrapper").height(($(".video-player").height()));
   $(window).resize(function(event) {
    $(".play-list-cont-wrapper").height(($(".video-player").height()));
   });

   if ($('[data-litsitem-id]').length > 4) {
      var listItemtopPos = $("div[data-litsitem-id=<?php echo $pt->get_id; ?>]").offset();
      $('.play-list-cont').scrollTop((listItemtopPos.top - 170));
   }
   

   $('#share-video').on('click', function(event) {
      event.preventDefault();
      $('.share-video').toggleClass('hidden');
   });
   $('#embed-video').on('click', function(event) {
      event.preventDefault();
      $('.embed-placement').toggleClass('hidden');
   });

   $('#save-button').on('click', function(event) {
      event.preventDefault();
      var logged = $('#main-container').attr('data-logged');
      if (!logged) {
         window.location.href = "{{LINK login?to=<?php echo $pt->actual_link;?>}}";
         return false;
      }
      var video_id = $('#video-id').val();
      if ($(this).attr('saved')) {
         $(this).html('<i class="fa fa-floppy-o fa-fw"></i> {{LANG save}}');
         $(this).removeAttr('saved');
      } else {
         $(this).html('<i class="fa fa-check fa-fw"></i> {{LANG saved}}');
         $(this).attr('saved', 'true');
      }
      $.post('{{LINK aj/save-video}}', {video_id: video_id});
   });
   $('.desc').on('click', function(event) {
      event.preventDefault();
      if ($(this).hasClass('expended')) {
        $('.watch-video-description').css({
           'max-height': '100px',
           'height': '100px',
           'overflow': 'hidden'
        });
        $(this).removeClass('expended');
        $(this).text("{{LANG show_more}}");
      } else {
        $('.watch-video-description').css({
           'max-height': '4000px',
           'height': 'auto',
           'overflow': 'auto'
        });
        $(this).addClass('expended');
        $(this).text("{{LANG show_less}}");
      }
   });

   <?php if (!empty($pt->get_video->youtube)) { ?>
   setTimeout(function () {
     $('iframe').css({ width: '100%', height: '100%'});
   }, 2000);
   <?php } ?>
   $('video').mediaelementplayer({
      // Do not forget to put a final slash (/)
      pluginPath: 'https://cdnjs.com/libraries/mediaelement-plugins/',
      // this will allow the CDN to use Flash without restrictions
      // (by default, this is set as `sameDomain`)
      shimScriptAccess: 'always',
      autoplay: true,
      features: ['playpause', 'current', 'progress', 'duration', 'speed', 'skipback', 'jumpforward', 'tracks', 'markers', 'volume', 'chromecast', 'contextmenu', 'flash' <?php echo ($pt->config->ffmpeg_system == 'on' && empty($pt->get_video->youtube)) ? ", 'quality'" : ''?> {{ADS}} {{VAT}}, 'fullscreen'],
      vastAdTagUrl: '{{VAST_URL}}',
      vastAdsType: '{{VAST_TYPE}}',
      jumpForwardInterval: 20,
      adsPrerollMediaUrl: [{{AD_MEDIA}}],
      adsPrerollAdUrl: [{{AD_LINK}}],
      adsPrerollAdEnableSkip: {{AD_SKIP}},
      adsPrerollAdSkipSeconds: {{AD_SKIP_NUM}},
      success: function (media) {
         $(".play-list-cont-wrapper").height(($(".video-player").height()));
         $('.mejs__ads').append('<div class="ads-test"><i class="fa fa-bullhorn"></i> Advertisement</div>');
         media.addEventListener('ended', function (e) {
            if ($('#autoplay').is(":checked")) {
               var url = $('#next-video').find('.video-title').find('a').attr('href');
               if (url) {
                  window.location.href = url;
               }
            }
            else if ($('[data-litsitem-id]').length > 0){
              var url = $('#next-video').find('[data-litsitem-id="{{KEY}}"]').next().find('a').attr('href');
              if (url) {
                window.location.href = url;
              }
            }
            else{
              //pass
            }
          }, false);
      },
   });
});

</script>
<style>
.mejs__offscreen {
  clip: initial !important;
  clip-path: inherit !important;
  -webkit-clip-path: inherit !important;
  opacity: 0;
}
</style>
