@extends('layout.app')
@section('page-css')
  <link rel="stylesheet" href="{!! asset('css/venobox.min.css') !!}">
  <link rel="stylesheet" href="{!! asset('css/hover-min.css') !!}">
  <style media="screen">
  body {
height: 100%
}
  </style>
@endsection
@section('page-content')
  <section class="spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen" style="background-image: url('images/download.png')">
          <span class="mask bg-tertiary alpha-6"></span>
          <div class="spotlight-holder py-lg pt-lg-xl" >
            <div class="container d-flex align-items-center no-padding">
              <div class="col">
                <div class="row cols-xs-space align-items-center text-center text-md-left justify-content-center">
                  <div class="col-7">
                    <div class="text-center mt-5">

                      <a id="vid" href="{{ asset('Walkthrough.mp4') }}" data-autoplay="true" data-vbtype="iframe" class="hvr-grow venobox " data-gall="myGallery">
                        <div class="justify-content-center text-center" style="width:150px; height:150px; background-color:white; border-radius:50%">
                          <i style="font-size:100px;position:relative;top:25px;left:10px" class=" text-center fa fa-play"></i>
                        </div>

                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
  {{-- <section class="  bg-cover bg-size--cover justify-content-center"  style="background-image: url('images/download.png');background-position:center;background-size:cover:background-repeat:no-repeat;height:100vh">



      <a id="vid" href="{{ asset('images/y2mate.com - Creative short film Wonderful little world_v240P.mp4') }}" data-autoplay="true" data-vbtype="iframe" class="hvr-grow venobox " data-gall="myGallery"> <i style="position:relative;top:50vh;width:100px;height:100px;background:grey; left:50vw"  class="fa fa-play"></i>
      </a>

        </section> --}}
@endsection
@section('page-js')
  <script type="text/javascript" src="{!! asset('vendor/jquery/jquery.min.js') !!}"></script>
  <script>

  </script>
  {{-- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> --}}
  <script src="{!! asset('css/venobox.min.js') !!}" charset="utf-8"></script>
  <script type="text/javascript">
$(document).ready(function(){
  // document.getElementById('vid').click();
$('.venobox').venobox(
  {'spinner':'rotating-plane',
  'numeratio': true,
  'autoplay':true,

  'infinigall':true,
  'numerationPosition':'bottom'
}
);
});
</script>
@endsection