playVideoModal.css

.slds-modal__container {
  padding: 0;
  width: fit-content;
}

.slds-modal__content {
  /* padding: 2vh 0 0 0; */
  width: fit-content;
  height: fit-content;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
  background-color: #fff;
  position: relative;
}

.icon-class {
  cursor: pointer;
  float: right;
}

lightning-icon.icon-class svg > use {
  fill: #ed7625;
}

.icon-class-color {
  fill: #e87722;
  padding: 5px 5px 0 0;
}
.iframe-class {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 640px;
  height: 360px;
  padding-top: 15px;
}
.content-class {
  float: none;
  clear: both;
}
.padding-extra {
  margin: 0 15px 15px 15px;
}
.heading-now {
  font-family: SST;
  font-size: 28px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #e87722;
  margin-bottom: 17px;
}
.ruler {
  width: 175px;
  height: 1px;
  border: solid 1px #6a737b;
}
.footer-class {
  /* width: 100%; */
  height: 20px;
  background-color: #0b4477;
  /* position: absolute; */
  /* bottom: 0; */
}

@media only screen and (max-width: 1024px) {
  /* .iframe-class {
    width: 450px;
    height: 300px;
  } */
  .slds-modal__container {
    width: fit-content;
  }
}

@media only screen and (max-width: 765px) {
  .slds-modal__content {
    /* padding: 2vh 2vh 0 2vh; */
    width: 100%;
  }
  .slds-modal__container {
    width: auto;
  }
  /* .icon-class-color {
          padding-left: 5vw;
      } */
  .iframe-class {
    width: 80vw !important;
    height: fit-content !important;
    padding: 0 0 5px 0;
  }
  .heading-now {
    font-size: 26px;
  }
}

playVideoModal.html

<template>
    <section role="dialog" tabindex="-1" aria-label="Meaningful description of the modal content" aria-modal="true"
        aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <div class="slds-modal__content">
                <div class="slds-grid slds-grid_align-spread">
                    <div class="slds-col slds-size_11-of-12"></div>
                    <div class="slds-col slds-size_1-of-12  icon-class-color">
                        <lightning-icon icon-name="utility:close" class="icon-class" onclick={closeThisModal}
                            alternative-text="Close" title="Close" size="small"></lightning-icon>
                    </div>
                </div>
                <div class="content-class">
                    <div class="padding-extra">
                        <div class="heading-now">{headingText}</div>
                        <div class="ruler"></div>
                        <iframe src={videoIframe} class="iframe-class" frameborder="0" allow="autoplay; fullscreen"
                            allowfullscreen></iframe>
                    </div>
                </div>
                <div class="footer-class"></div>
            </div>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>
</template>

playVideoModal.js

import { LightningElement, api } from 'lwc';

export default class WmPlayVideoModal extends LightningElement {
    @api videoIframe;
    @api headingText = 'Modal Header';

    closeThisModal() {
        this.dispatchEvent(new CustomEvent('closevideomodal'));
    }
}