@extends("layouts.app_new")
@section("title")
    CCKH Multimedia view
@endsection
@section("content")
  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />

            <!-- Start Courses Details Area -->
        <section class="courses-details-area ptb-70">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="events-details-header">
                            <a href="{{url('multimedia-listing')}}" class="back-all-events"><i class="bx bx-chevrons-left"></i> Back To All Multimedia</a>
                            <h3>{{$Multimedia->name}}</h3>
                        </div>
                    </div>
                    <div class="col-lg-9 col-md-12">
                        <div class="events-details">
                            <div class="events-details-image">
                                <video id="vid1"  class="video-js" controls preload="auto" width="1110"data-setup="{}">
                                    <source src="{{url($Multimedia->file)}}" type="video/mp4">
                                </video>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-12">
                        <aside class="widget-area">
                            <section class="widget widget_events_details">
                                <h3 class="widget-title">Latest Multimedia</h3>
                                <ul>
                                    @foreach($MultimediaListing as $media)
                                    <li><a href="{{url('multimedia-view/'.$media->id)}}"><span>{{$media->name}}</span></a></li>
                                    @endforeach
                                </ul>
                            </section>
                        </aside>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Courses Details Area -->

@endsection
@section("script")
  <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
  <script type="text/javascript">
    var player = videojs('vid1', {
        responsive: true
    });


  </script>
@endsection