@php
    // Auto convert to embed URL
    $embedUrl = convertToEmbedUrl($url);
@endphp
<div class="col-md-12">
    <div class="widget-video {{ $area }}-video">
        <div class="video-container">
            <div class="video-wrapper">
                <iframe src="{{ $embedUrl }}" frameborder="0" allowfullscreen
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    loading="lazy"></iframe>
            </div>
        </div>
    </div>
</div>


<style>
    .widget-video {
        margin: 3rem 0;
    }

    .video-container {
        background: #000000;
        border-radius: 16px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    .video-wrapper {
        position: relative;
        padding-bottom: 56.25%;
        /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
    }

    .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .sidebar-video {
        margin: 2.5rem 0;
    }

    .sidebar-video .video-container {
        border-radius: 12px;
    }

    /* Loop content video */
    .loop-content-video {
        margin: 2rem 0;
    }

    .loop-content-video .video-container {
        border-radius: 12px;
    }
</style>