Responsibly embedded videos

Good morning, I'm developing a website and through it you can embed videos from both YouTube and Facebook. The Youtube videos fit perfectly according to the size of the div, the problem is even in Facebook where they appear broken if their height is bigger or smaller than 300 pixels and its width is modified. Here's an outline of my code:

CSS:

/* css video incorporado */
.embedresize {
max-width: 560px;
margin: auto;
}

.embedresize div {
position: relative;
height: 0;
padding-bottom: 56.25%;
}

.embedresize iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.intro #intro .embedresize iframe,
.exit .quizz .embedresize iframe,
.alreadyplayed #intro .embedresize iframe,
.identityset #intro .embedresize iframe,
#notabene .embedresize iframe,
#message_intro .embedresize iframe,
.fancybox_body .embedresize iframe,
#comments .embedresize iframe,
#description .embedresize iframe,
.alreadyplayed .embedresize iframe,
#adserver .embedresize iframe {
max-width: none !important;
}

HTML:

<h1 style="font-weight: 600; font-size: 14px; text-align: center;">Previa:</h1>
<div class="embedresize">
    <div>
       <iframe src="<?=$row_rsRegistro['vid_iframe'];?>" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true" height="300"></iframe>
    </div>
</div>

Here's how the embedded video stays:

This HTML and CSS code I have taken from a gringos tutorials on how to leave Facebook embedded video on any website. Is it possible for you to leave this video responsive without using API's or using different structures with Back End confirmation?