Load video

<div class="mb-5" id="providerVideoDiv">
                <iframe id="providerVideoIframe" width="840" height="502" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

            </div>

   $.ajax({
            type: 'get',
            url: "/Home/GetProviderVideo",
            data: { ProviderId:@Model.InstituteId},
            success: function (resultData) {
                if (resultData.success) {
                    $("#providerVideoDiv").show();
                    document.getElementById('providerVideoIframe').src = resultData.url;
                }
                else {
                    $("#providerVideoDiv").hide();
                    console.log(resultData.message);
                }
            },
            error: function () {
                alert("Error Occoured");
            }
        });


//if design needed
<div id="video">
                    <div class="rounded mb-4 bg-light">
                        <div class="p-5">
                            <div class="row">
                                <div class="col-lg-10 mx-auto">
                                    <div class="video-container">
                                        <iframe width="560" height="315" src="@Model.providerVideoDetail.VideoURL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>