CSS Fluid Video - html

Question

I'm trying to build a responsive video component for my portfolio site.
It's essentially a mobile app video which I am positioning on top of a phone mockup, however, my problem is that I want to mask/crop them both within a container, but still make them responsive or fluid.
I've figured that using Overflow hidden on the containing div works but when I change the browser size I would like the height of the containing div to maintain the masking.
Here are some images to describe my situation.
and also a JS Fiddle
<section class="feed">
<div class="feed-element">
<div class="animation">
<div class="screen">
<div class='embed-container'>
<iframe src='https://player.vimeo.com/video/281167304?autoplay=1&loop=1&color=357ded&title=0&byline=0&portrait=0"' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
<div class="phone">
<img src="http://www.anthonyeamens.co.uk/test/images/iphone#2x.png">
</div>
</div>
</div>
<div class="feed-text">
<h1>
Title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</section>

Answer 1

Ok, I will try with this solution. First of all, this is not a good solution: it is plenty of MAGIC NUMBERS (https://css-tricks.com/magic-numbers-in-css/), a really bad thing in CSS.
Iframe & Phone image have no related measures (the first one is almost a square, the last one is pretty vertical) so it's really hard to make them get along.
For all these reasons, my first answer is: ok, here there is a structural problem and all the work should be redesigned to remove all those hack&trick.
However, I know, this isn't a real solution for you 'cause you have to finish your work with the videos & images you have already done. So, to try to help you I kept the structure you have created with very very small changes: I trasformed phone image in a background and I removed some div's.
This is the situation.
CSS:
.feed {
max-width:1170px;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 2.564102564102564%; /* how scary! (^_^;) */
grid-column: span 12;
align-content:center;
justify-content:center;
align-items:center;
margin: 50px 0px;
}
.feed-element {
position: relative;
grid-column: 1 / 7;
overflow-y: hidden;
background-color: #F6F6F6;
background-image:url("http://www.anthonyeamens.co.uk/test/images/iphone#2x.png");
background-size: auto 124%; /* MAGIC NUMBER */
background-repeat:no-repeat;
background-position: center -28%; /* MAGIC NUMBER */
}
.feed-text {
grid-column: 7 / 13;
}
.animation {
max-width: 370px;
margin: 0 auto;
}
.embed-container {
position: relative;
padding-bottom: 124%; /* MAGIC NUMBER */
overflow:hidden;
margin-top: 22.84%; /* MAGIC NUMBER */
margin-left:1px; /* MAGIC NUMBER */
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 8%; /* MAGIC NUMBER */
left: 0;
width: 100%;
height: 100%;
}
#media only screen and (max-width:400px) {
.feed-element {grid-column: span 12;}
.feed-text {grid-column: span 12;}
}
And this is HTML:
<section class="feed">
<div class="feed-element">
<div class="animation">
<div class='embed-container'><iframe src='https://player.vimeo.com/video/281167304?autoplay=1&loop=1&color=357ded&title=0&byline=0&portrait=0"' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
</div>
</div>
<div class="feed-text">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</section>
I don't know why but the Stackoverflow Code Snippet have some troubles working with these CSS & HTML - maybe because there is an iframe inside another iframe... or just because this is not a good solution... (^_^;), but I tried it in a normal situation with my browsers and it works.
I create also a jsfiddle: https://jsfiddle.net/692hd1tL/5/
So, you can use this solution, if you want, but after this work... forgot it! Absolutely! :D
Cheers :)