时间戳

首页 > 解决方案 > 引导网站，嵌入 iframe (youtube) 溢出并阻止其他内容

css - 引导网站，嵌入 iframe (youtube) 溢出并阻止其他内容

问题描述

正如标题所说，我已经在我的页面上嵌入了一个 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/>

标签： csshtmlbootstrap-4

解决方案

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

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>

推荐阅读