0

As title says, I've embeded a youtube video on my page, upon resizing the page, while the rest of the content is reponsive and adapts, the youtube frame doesn't, overflows and blocks other content from the site.

I want to make it responsive if possible, but mainly I just want to make it so nothing can block the content and add some kind of divider.

Really new at bootstrap/html/css so I apologise if this is a really easy to fix problem and I'm just dumb, any and all help apreciated, thanks.

Video of the issue: https://puu.sh/CsDP4/c5f221c22e.mp4 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/>
plshalpIsux
  • 3
  • 3

3 Answers3

1

Iframe element's inner content does not resize when you resize your main page window, that's just how iframe works. To resize iframe content dynamically, you can check solution that was already given here: How to set iframe size dynamically (it involves some use of javascript).

Krunx
  • 226
  • 1
  • 7
  • Yea, I undestand, although the soundcloud embed seems to be responsive, but I guess that's cause they made it responsive and not because of my code. I'll try using your suggestion, thanks! – plshalpIsux Jan 06 '19 at 21:03
1

you can use max-width in iframe so it be responsive.

iframe {
  max-width: 100%
}
<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
 <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/>
</body>

<!-- Scripts are here -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>
Nisharg Shah
  • 16,638
  • 10
  • 62
  • 73
0

Try this structure:

<div class="container-fluid overflow-hidden">
   <div class="row">
       <iframe class="text-center embed-responsive-item "></iframe>
   </row>
</div>
funnydman
  • 9,083
  • 4
  • 40
  • 55
  • Although the iframe isn't responsive, your solution stopped the overflow from blocking the content in the rest of the page, thanks a lot! – plshalpIsux Jan 06 '19 at 20:53