Сайт начальной загрузки, встраиваемый iframe (youtube) переполняется и блокирует другой контент - PullRequest
Новая
       1

Сайт начальной загрузки, встраиваемый iframe (youtube) переполняется и блокирует другой контент

0 голосов
/ 06 января 2019

Как видно из заголовка, я встраивал видео на 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/>

Ответы [ 3 ]

0 голосов
/ 06 января 2019

Внутреннее содержимое элемента iframe не изменяется при изменении размера окна главной страницы, именно так работает iframe. Чтобы динамически изменить размер содержимого iframe, вы можете проверить решение, которое уже было здесь дано: Как динамически установить размер iframe (это предполагает некоторое использование javascript).

0 голосов
/ 06 января 2019

вы можете использовать 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>
0 голосов
/ 06 января 2019

Попробуйте эту структуру: 

<div class="container-fluid overflow-hidden">
   <div class="row">
       <iframe class="text-center embed-responsive-item "></iframe>
   </row>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...