Modal No Background: Video Card

Refer to modal frame found in view tab for complete structure without content. 
<div class="sds-modal -noBg modal fade" tabindex="-1" id="accessConventionsVideoModal" aria-hidden="true">
    <div class="sds-modal__headerOutside container d-flex justify-content-end">
        <button type="button" class="sds-btn -iconBtn -btnSecondary sds-modal__close" data-dismiss="modal" aria-label="Close">

            <span class="sds-icon sds-icon-close"></span>

        </button>
    </div>
    <div class="sds-modal__dialog modal-dialog modal-dialog-centered modal-xl">
        <div class="sds-modal__content modal-content bg-transparent">
            <!-- content start -->

            <div class="container">
                <div class="row justify-content-center align-items-stretch align-items-stretch-immediate">
                    <div class="col-12">
                        <div class="sds-videoPlayer js-videoPlayerV3">
                            <video class="sds-videoPlayer__video" poster="../../media/snet/illustrations/video-cover-nv-sitfin.jpeg" controls>
                                <source src="../../media/snet/videos/trimmed.mp4" type="video/mp4">
                                <track kind="captions" label="English" srclang="EN" src="../../media/snet/videos/subtitle.vtt" default>
                            </video>
                            <div class="sds-videoPlayer__captions js-videoPlayer__captions">
                                <div class="sds-videoPlayer__singleCaption js-videoPlayer__singleCaption -isActive" data-index="-1">No Subtitle</div>
                                <div class="sds-videoPlayer__singleCaption js-videoPlayer__singleCaption" data-index="0">English</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- content end -->
        </div>
    </div>
</div>
 
{% extends "@snet-modal-no-background-frame" %}
{% block content %}
	<div class="container">
		<div class="row justify-content-center align-items-stretch align-items-stretch-immediate">
			<div class="col-12">
				{% render "@snet-video-player--v3-video-tag" %}
			</div>
		</div>
	</div>
{% endblock %}