@extends('ved.layout.layout')
@section('content')
    <input type="text" value="{{ $videoId }}" hidden id="videoId">
    <div id="player" class="col-lg-12">
    </div>
@endsection

@push('js')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const videoIdElement = document.getElementById('videoId').value;
            const tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            const firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            let player;

            window.onYouTubeIframeAPIReady = function() {
                player = new YT.Player('player', {
                    height: '390',
                    width: '640',
                    videoId: videoIdElement,
                    playerVars: {
                        'playsinline': 1
                    },
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            };

            function onPlayerReady(event) {
                event.target.playVideo();
            }

            let done = false;

            function onPlayerStateChange(event) {
                if (event.data === YT.PlayerState.PLAYING && !done) {
                    setTimeout(stopVideo, 6000);
                    done = true;
                }
            }

            function stopVideo() {
                player.stopVideo();
            }
        });
    </script>
@endpush