.video-container {
    /* width is set as 100% here. any width can be specified as per requirement */
    width: 100%;
  
    height: 0px;
    position: relative;
}
.ratio169{
    padding-top: 56.25%;
}
.ratio43{
   
        padding-top: 75%;
    
}
.ratio43 img, .ratio169 img{
    width: 100%;
}
.video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.template7-display-topmiddle {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-41%,0%);
    width: 63%;
}
.template7-display-topleft {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(0%,-30%);
    -ms-transform: translate(-0%,-30%);
}
.template7-display-left {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%,-30%);
    -ms-transform: translate(-0%,-30%);
}
.template7-display-topmiddle img{

width: 100%;
}

.template7 {  display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
      "video1 Slide Slide"
      "video2 Slide Slide"
      ". Slide Slide"
      ". . .";
      padding: 10px
  }
  
  .video1 { grid-area: video1; }
  
  .video2 { grid-area: video2; }
  
  .Slide { grid-area: Slide; }
  img {width: 100%;}