<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> {{LANG watch_later}} - {{USER name}}
                      </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">
                <div class="video-title">
                    <input type="hidden" value="{{ID}}" id="video-id">
                    <div class="video-big-title">
                        <a href="{{URL}}" itemprop="title"><h1>{{TITLE}}</h1></a> <?php if ($pt->get_video->is_owner == true) { ?><a title="Edit" style="color:#fff;" class="btn btn-main" href="{{LINK edit-video/{{ID}}}}"><i title="{{LANG edit_video}}" class="fa fa-pencil fa-fw"></i></a> <?php } ?>
                    </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><span class="views-mobile show-in-mobile"> - {{VIEWS}} {{LANG views}}</span>
                        </div>
                        <div class="publisher-subscribe-button hide-in-mobile-720">
                            {{SUBSCIBE_BUTTON}}
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="video-info-element pull-right">
                        <div class="video-views hide-in-mobile-720">
                            {{VIEWS}} {{LANG views}}
                        </div>
                        <div class="views-bar hide-in-mobile-720" style="width: {{DISLIKES_P}}%"></div>
                        <div class="views-bar blue hide-in-mobile-720" style="width: {{LIKES_P}}%"></div>
                        <div class="clear"></div>
                        <div class="video-likes">
                            <div class="like-btn pull-left {{LIKE_ACTIVE_CLASS}}" id="likes-bar" onclick="Wo_LikeSystem('{{ID}}', 'like', this, 'is_ajax')" data-likes="{{RAEL_LIKES}}" {{ISLIKED}}>
                                <i class="fa fa-thumbs-up"></i> <span class="likes" id="likes">{{LIKES}}</span>
                            </div>
                            <div class="like-btn pull-right text-right {{DIS_ACTIVE_CLASS}}" id="dislikes-bar" onclick="Wo_LikeSystem('{{ID}}', 'dislike', this, 'is_ajax')" data-likes="{{RAEL_DISLIKES}}" {{ISDISLIKED}}>
                                <i class="fa fa-thumbs-down"></i> <span class="likes" id="dislikes">{{DISLIKES}}</span>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="video-options">
                        <?php if (IS_LOGGED): ?>
                          <button class="btn-share" onclick="PT_AddToList('{{ID}}');">
                              <i class="fa fa-plus fa-fw"></i> {{LANG add_to}}
                          </button>
                        <?php endif; ?>
                        <button class="btn-share" id="share-video">
                            <i class="fa fa-share fa-fw"></i> {{LANG share}}
                        </button>
                        <?php if ($pt->config->embed_system == 'on') {?>
                        <button class="btn-share" id="embed-video">
                            <i class="fa fa-code fa-fw"></i> {{LANG embed}}
                        </button>
                        <?php } ?>
                        <?php if (IS_LOGGED): ?>
                          <?php if ($pt->reported === true): ?>
                          <button class="btn-share btn-report active" onclick="PT_ReportVideo('{{ID}}',this);" data-rep="0">
                            <i class="fa fa-flag fa-fw"></i> 
                            <span>{{LANG cancel_report}}</span>
                          </button>
                          <?php else: ?>
                          <button class="btn-share btn-report" onclick="PT_ReportVideo('{{ID}}',this);" data-rep="1">
                            <i class="fa fa-flag fa-fw"></i>
                            <span>{{LANG report}}</span>
                          </button>
                          <?php endif; ?>
                        <?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="https://www.facebook.com/sharer/sharer.php?u={{ENCODED_URL}}" class="fa fa-facebook"></a>
                           <a href="https://twitter.com/home?status={{ENCODED_URL}}" class="fa fa-twitter"></a>
                           <a href="https://plus.google.com/share?url={{ENCODED_URL}}" class="fa fa-google"></a>
                           <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ENCODED_URL}}&title={{TITLE}}" class="fa fa-linkedin"></a>
                           <a href="ttps://pinterest.com/pin/create/button/?url={{ENCODED_URL}}&media={{THUMBNAIL}}" class="fa fa-pinterest"></a>
                           <a href="http://www.tumblr.com/share/link?url={{ENCODED_URL}}" class="fa fa-tumblr"></a>
                           <a href="http://www.reddit.com/submit?url={{ENCODED_URL}}" class="fa fa-reddit"></a>
                           <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();
      $('.watch-video-description').css({
         'max-height': '4000px',
         'height': 'auto',
         'overflow': 'auto'
      });
      $(this).remove();
   });

   <?php if (!empty($pt->get_video->youtube)) { ?>
   setTimeout(function () {
     $('iframe').css({ width: '100%', height: '100%'});
   }, 2000);
   <?php } ?>
   $('video').mediaelementplayer({
      pluginPath: 'https://cdnjs.com/libraries/mediaelement-plugins/',
      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 ($('[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>
