@if(isset($sub) && !empty($sub->url))
    @php
        $video_details = getVidDetails($sub->type, $sub->url, 1);
    @endphp
    <div class="component-video">
        @if($sub->type === 'youtube' || $sub->type === 'vimeo')
        <a class="youtube-link" data-toggle="modal" data-target="#video-popup-modal-{{$sub->id}}">
            <div class="youtube-thumbnail-wrapper embed-responsive embed-responsive-20by5">
                <img src="{{$video_details->thumb}}" class="youtube-thumbnail img-fluid embed-responsive-item" alt="">
            </div>
            {{-- <h4 class="youtube-title mb-0 py-4">
                {{$video_details->title}}
            </h4> --}}
        </a>
        @elseif($sub->type === 'other')

            <video src="{{ $sub->url }}">

        @endif
    </div>

    <div class="hero-video-modal">
        <div class="modal fade" id="video-popup-modal-{{$sub->id}}" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body bg-black">

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-id="#video-popup-modal-{{$sub->id}}"></button>
                        <!-- 16:9 aspect ratio -->
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe src="" data-src="https://{{ $video_details->url }}?rel=0&autoplay=1&mute=1" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif