Responsive youtube embed in CSS Grid help needed

[Gattsu]

I've gone further with my Jsfiddle modification.

I'd say it looks decent now, apart from the youtube video that's stretched and not integrated in the Grid.

Could someone be so kind and replace my last Image (noaptea.jpg) with my youtube embed (included in the fiddle) and scale it correctly in my grid in the last box?

I would like the Youtube video inside to fill the box of the grid as much as possible while keeping the correct proportions. I've tried multiple online recommendations, but i'm just not there yet. Thank you! You can fork my jsfiddle and leave a copy here in a comment if you want. I really appreciate it.

P.s. Under this grid presentation, i plan to put an Owl Carousel for the same category products.If you have a recommendation in mind here, i'd love to hear it, considering it's my next step.

Css Code : 

/* Latest compiled and minified CSS included as External Resource*/



div {
  display: block;
}

.b-padding {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.shop-cats-box {
  background-image: url(http://drapaje.ro/pub/media/wysiwyg/talazurile/pavilion_zi.jpg);
  float: left;
  position: relative;
  width: 50%;
  padding-bottom: 32.5%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.square {
    float: left;
    position: relative;
    width: 50%;
    padding-bottom: 32.5%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.image-large {
    border: 1px solid #000;
}

.img_1-1 {
  background-image: url(http://drapaje.ro/pub/media/wysiwyg/talazurile/proiect.jpg);
}

.img_1-1,
.img_1-2,
.img_7-1,
.img_7-2 {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}

.img_1-2 {
  background-image: url(http://drapaje.ro/pub/media/wysiwyg/talazurile/bar.jpg);
}

.img_2-1 {
  background-image: url(http://drapaje.ro/pub/media/wysiwyg/talazurile/sezlong.jpg);
}

.img_2-2 {
  background-image: url(http://drapaje.ro/pub/media/wysiwyg/talazurile/noaptea.jpg);
}


.text {
    background: rgba(255,255,255,0.5);
    position: absolute;
    top: 50%;
    left: 40%;
    padding: 1rem;
    transform: translateY(-50%);
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: normal;
    font-size: 2vmin;
    color: black;
    font-weight: 400;
}


.video-container {
	position: relative;
	padding-bottom: 32%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
  border: 1px solid #000; 
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video-wrapper {
	width: 640px;
	float:none;
	margin-left:auto;
	margin-right:auto;
	max-width: 100%;
}