<style type="text/css">
	.btn
	{
		border-radius: 0!important;
	}
</style>
<?php $data  = $this->frontend_model->get_video_page_2_details(); ?>
			<div class="cover-image bg-background" data-bs-image-src="<?php echo base_url()?>uploads/banner1.jpg" style="background: url(&quot;<?php echo base_url()?>uploads/banner1.jpg&quot;) center center;">
				<!--Section-->
				<div>
					<div class="sptb-1">
						<div class="header-text1 mb-0">
							<div class="container">
								<div class="row">
									
								</div>
							</div>
						</div><!-- /header-text -->
					</div>
				</div><!--/Section-->
			</div>
		</div><!--/Section-->
		<!--Breadcrumb-->
		<div class="relative">
			<div class="shape overflow-hidden text-white">
				<svg viewBox="0 0 2880 48" fill="none" xmsns="http://www.w3.org/2000/svg">
					<path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="<?php echo $visual_setting->color_2?>"></path>
				</svg>
			</div>
		</div>
		
		<section id="why-us" class="why-us" class=" d-flex justify-content-center align-items-center" style="background-color:#f7f8fc!important">
   <div class="container" style="text-align: center;">
      <div class="row">
         <div style="max-width: 900px;margin-right: auto;margin-left: auto;">
            <div class="col-sm-12">
               <h2 style="padding-top: 20px;color: <?php echo $visual_setting->color_3 ?>!important;"><b><?php echo $data->heading; ?></b></h2>
               <br/>
               <span style="font-size: 20px"><?php echo $data->des; ?></span>
            </div>
            <?php 
            $all_video = $this->db->get('video_page_video')->result();
            ?>
            <div class="col-sm-12" style="padding-top:20px;">
               <div class="row">
                  <div class="outer">
                     <div id="big" class="owl-carousel owl-theme">
                        <?php $a=1; foreach ($all_video as $video): ?>
                        <?php 
                           $video_image_1 = explode("?v=", $video->video_link);
                           $video_image_1 = $video_image_1[1];
                           $image_video_1 = "http://img.youtube.com/vi/".$video_image_1."/maxresdefault.jpg";
                        ?>
                           <div class="item">
                              <video id="video-player-<?php echo $a; ?>" class="video-player" poster="<?php echo $image_video_1; ?>">
                                 <source src="<?php echo file_get_contents(base_url().'home/video?url='.$video->video_link);?>" type="video/mp4">
                                   Your browser does not support the video tag.
                              </video>
                              <script>
                                 document.addEventListener("DOMContentLoaded", function() {
                                       new Moovie({
                                       selector: "#video-player-<?php echo $a; ?>",
                                    });
                                 });
                              </script>
                           </div>
                           
                        <?php $a++; endforeach ?>
                     </div>

                     <div id="thumbs" class="owl-carousel owl-theme">
                        <?php $l=1; foreach ($all_video as $video): ?>
                        <?php 
                           $video_image = explode("?v=", $video->video_link);
                           $video_image = $video_image[1];
                           $image_video = "http://img.youtube.com/vi/".$video_image."/maxresdefault.jpg";
                        ?>
                           <div class="item">
                              <h1><img src="<?php echo $image_video ?>"></h1>
                           </div>
                        <?php $l++; endforeach ?>
                     </div>
                  </div>
               </div>
            </div>

         </div>
      </div>
   </div>
</section>

<br/>
<br/>
<br/>
<script type="text/javascript">
   $(document).ready(function() {
  var bigimage = $("#big");
  var thumbs = $("#thumbs");
  //var totalslides = 10;
  var syncedSecondary = true;

  bigimage
    .owlCarousel({
    items: 1,
    // slideSpeed: 2000,
    nav: true,
    // autoplay: true,
    dots: false,
    loop: true,
    responsiveRefreshRate: 200,
    navText: [
      '<i class="fa fa-arrow-left" aria-hidden="true"></i>',
      '<i class="fa fa-arrow-right" aria-hidden="true"></i>'
    ]
  })
    .on("changed.owl.carousel", syncPosition);

  thumbs
    .on("initialized.owl.carousel", function() {
    thumbs
      .find(".owl-item")
      .eq(0)
      .addClass("current");
  })
.owlCarousel({
    items: 4,
    dots: true,
    nav: true,
    navText: [
      '<i class="fa fa-arrow-left" aria-hidden="true"></i>',
      '<i class="fa fa-arrow-right" aria-hidden="true"></i>'
    ],
    // smartSpeed: 200,
    // slideSpeed: 500,
    slideBy: 4,
    responsiveRefreshRate: 100
  })
    .on("changed.owl.carousel", syncPosition2);

  function syncPosition(el) {
    //if loop is set to false, then you have to uncomment the next line
    //var current = el.item.index;

    //to disable loop, comment this block
    var count = el.item.count - 1;
    var current = Math.round(el.item.index - el.item.count / 2 - 0.5);

    if (current < 0) {
      current = count;
    }
    if (current > count) {
      current = 0;
    }
    //to this
    thumbs
      .find(".owl-item")
      .removeClass("current")
      .eq(current)
      .addClass("current");
    var onscreen = thumbs.find(".owl-item.active").length - 1;
    var start = thumbs
    .find(".owl-item.active")
    .first()
    .index();
    var end = thumbs
    .find(".owl-item.active")
    .last()
    .index();

    if (current > end) {
      thumbs.data("owl.carousel").to(current, 100, true);
    }
    if (current < start) {
      thumbs.data("owl.carousel").to(current - onscreen, 100, true);
    }
  }

  function syncPosition2(el) {
    if (syncedSecondary) {
      var number = el.item.index;
      bigimage.data("owl.carousel").to(number, 100, true);
    }
  }

  thumbs.on("click", ".owl-item", function(e) {
    e.preventDefault();
    var number = $(this).index();
    bigimage.data("owl.carousel").to(number, 300, true);
  });
});


</script>
<style type="text/css">
   .outer { margin:0 auto; max-width:800px;}
#thumbs .item { background: #C9C9C9; height:70px; line-height:70px; padding: 0px; margin:2px; color: #FFF; border-radius: 3px; text-align: center; cursor: pointer; }
#thumbs .item h1 { font-size: 18px; }
#thumbs .current .item { background:#FF5722; }
.owl-theme .owl-nav [class*='owl-'] { -webkit-transition: all .3s ease; transition: all .3s ease; }
.owl-theme .owl-nav [class*='owl-'].disabled:hover { background-color: #D6D6D6; }
#big.owl-theme { position: relative; }
#big.owl-theme .owl-next, #big.owl-theme .owl-prev { background:#333; width: 22px; line-height:40px; height: 40px; margin-top: -20px; position: absolute; text-align:center; top: 50%; }
#big.owl-theme .owl-prev { left: 10px; }
#big.owl-theme .owl-next { right: 10px; }
#thumbs.owl-theme .owl-next, #thumbs.owl-theme .owl-prev { background:#333; }
</style>