<style>
#flexbox_mother {
display: flex;
justify-content: space-between;
}
.flexbox_child {
align-items: stretch;
width: 50%;
padding: 5px;
}

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}

@media (max-width: 900px) {
/* 横幅が900px以下の場合に適用するスタイル */
#flexbox_mother {
display: flex;
justify-content: flex-start;
flex-direction: column;
}
.flexbox_child {
width: 100%;
}
}
</style>

<div id="flexbox_mother" style="margin-top: 5px;">
<div class="flexbox_child">
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Y32NQIh-D4c?si=GE98oRoXGS1DjONN&quot; title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<div class="flexbox_child">
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/S87RqNfSdx4?si=759D0UkILXDgVKOz&quot; title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>