Why does does two videos i'm using overlap each other? - html

Question

I'm building a website and the two videos I'm using overlap and I can't figure out why. I'm using two classes and I've taken out the top and left and it still over laps. I'm also curious why instead of the video being small the video is being cut out. the video will either play the top half or the bottom half of the video but my actually question is why the two videos overlap and how can I fix it.
#media only screen and (max-device-width:480px) {
/* styles for mobile browsers smaller than 480px; (iPhone) */
.center {
width: 300px;
height: 100px;
position: fixed;
/*left: 48.5%;
top: 44%;*/
transform: translate(-50%, -50%);
}
.embed-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.27198%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
}
.embed-container iframe {
position: absolute;
width: 50%;
height: 50%
}
<!--stackover flow trying to get the videos to shirnk when using mobile devices. need to be done for "ipad" and cell phones from my knowlegde computers are fine. -->
<p align="center">
<div class="embed-container">
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwhereisslice%2Fvideos%2F1034464440067039%2F&show_text=0&width=560">
</iframe>
</div>
</p>
<p align="center">
<div class="embed-container">
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FTimeOutForMeInc%2Fvideos%2F526931557744638%2F&show_text=0&width=267">
</iframe>
</div>
</p>

Answer 1

To answer your first question looks like you have the videos set to position absolute. Removing that position rule from the class .embed-container iframe will get the videos stacked on top of each other.
Why the videos themselves are being cut off is because you are constraining the hight property in .embed-container iframe as well. If you inspect the video play in the iFrame you will notice that Facebook is giving it a set pixel hight. You ought to be able to fix this by removing your set height in .embed-container iframe