Question

正如标题所述，在调整页面大小后，我已经在页面上嵌入了youtube视频，而其余内容是自适应的并且可以适应，而youtube框架则不会溢出，阻止网站上的其他内容。

我想尽可能使它具有响应性，但主要是我想使其无响应，从而阻止内容并添加某种分隔符。

bootstrap / html / css中的功能真的很新，因此，如果这真的很容易解决，我深表歉意，我只是愚蠢的，对所有帮助都感激不尽，谢谢。

问题的视频：https://puu.sh/CsDP4/c5f221c22e.mp4 代码：

            <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/>

Answer 1

在调整首页窗口大小时，iframe元素的内部内容不会调整大小，这就是iframe的工作方式。要动态调整iframe内容的大小，您可以查看此处已经提供的解决方案：How to set iframe size dynamically（涉及到JavaScript的某些使用）。

Answer 2

尝试以下结构：

<div class="container-fluid overflow-hidden">
   <div class="row">
       <iframe class="text-center embed-responsive-item "></iframe>
   </row>
</div>

Answer 3

您可以在iframe中使用max-width，以便响应。

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>

Bootstrap网站，嵌入的iframe（youtube）溢出并阻止了其他内容

3 个答案: