So, I have a youtube video embedded on my page and when I resize the page, the video frame doesn't adjust responsively like the rest of the content. It overflows and blocks other site content.
I'm looking to make it responsive if possible or at least prevent it from blocking other content by adding a divider.
I'm pretty new at bootstrap/html/css so apologies if this is an easy fix and I'm just missing something obvious. Any help would be greatly appreciated, thank you.
Video of the issue: Code:
<div class="bg container-fluid text-center" id="GFX">
<div class="text-center title">
<h1>GFX</h1>
</div>
<hr/>
<div class="container-fluid overflow-hidden">
<iframe src="https://albumizr.com/a/TO-n" scrolling="yes" frameborder="0" allowfullscreen width="700" height="700"></iframe>
</div>
<hr/>
</div>
<hr>
<div class="bg embed-responsive-16by9 text-center" id="Video">
<div class="text-center title">
<h1>Video Editing</h1>
</div>
<hr/>
<div class="container-fluid overflow-hidden">
<iframe class="text-center embed-responsive-item " width="1280" height="720" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLwf6BHzjcncmOoDkyKM8PNAnYhRHkbXub" frameborder="0" autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<hr/>
</div>
<hr/>
<br>
<div class="bg container-fluid text-center" id="Music">
<div class="text-center title">
<h1>Music Production</h1>
</div>
<hr/>
<div class="container-fluid overflow-hidden">
<iframe class="text-center" width="100%" height="auto" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/677510388%3Fsecret_token%3Ds-q8lC3&color=%230d58e7&auto_play=false&hide_related=false&show_comments=false&show_user=true&show_reposts=false&show_teaser=true"></iframe>
</div>
<hr/>
</div>
<hr/>