Невозможно разместить iframe внутри элемента div - HTML и CSS - PullRequest
Новая
       6

Невозможно разместить iframe внутри элемента div - HTML и CSS

0 голосов
/ 20 октября 2018

Всякий раз, когда я пытаюсь сделать YouTube встроенным в созданный элемент div, видео выходит за пределы созданного мной div.

ПРИМЕЧАНИЕ. Это домашнее задание.Я не ищу код для копирования, просто подсказка или толчок в правильном направлении.

- Правила не могут быть помещены в код HTML, они должны быть в таблице стилей

- Правила, уже установленные в таблице стилей, обрисованы в общих чертах в назначении (включая плавающее).

Локальный рендер

CSS: 

.container {
    width: 100%;
    background-color: #60c90e;
}

.content {
    width: 100%;
}

.video {
   width: 95%;
   margin: 2.5%;
   border-radius: 20px;
   padding: 1%;
   background-color: white;
}

.footer {
    background-color: aqua;
    height: 50px;
}

.video iframe {
    width: 65%;
    margin: 10px;
    float: left;
}

HTML: 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="CSS/test.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="container">

  <div class="content">

    <div class="video">

        <iframe width="560" height="315" src="https://www.youtube.com/embed/vC130RwBJQ8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

        <h3>test</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst quisque sagittis purus sit amet. Ut porttitor leo a diam sollicitudin tempor. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Orci eu lobortis elementum nibh tellus. Nam at lectus urna duis convallis convallis tellus id. Tellus id interdum velit laoreet id donec. Nunc faucibus a pellentesque sit amet porttitor </p>

   </div> <!-- end of video -->

 </div> <!-- end of content -->

<footer class="footer">test</footer>

</div> <!-- end of container -->   

</body>

</html>

1 Ответ

0 голосов
/ 20 октября 2018

Вам необходимо очистить всплывающее iframe внутри .video div.Без редактирования HTML вы можете сделать это, используя псевдоэлемент ::after.Я добавил следующий код в ваш пример выше: 

.video::after {
  content: '';
  display: block;
  clear: both;
}

Рабочий фрагмент: 

.container {
    width: 100%;
    background-color: #60c90e;
}

.content {
    width: 100%;
}

.video {
   width: 95%;
   margin: 2.5%;
   border-radius: 20px;
   padding: 1%;
   background-color: white;
}

.footer {
    background-color: aqua;
    height: 50px;
}

.video iframe {
    width: 65%;
    margin: 10px;
    float: left;
}

.video::after {
  content: '';
  display: block;
  clear: both;
}
  <div class="container">

  <div class="content">

    <div class="video">
        <iframe width="560" height="560" src="https://www.youtube.com/embed/vC130RwBJQ8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

        <h3>test</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst quisque sagittis purus sit amet. Ut porttitor leo a diam sollicitudin tempor. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Orci eu lobortis elementum nibh tellus. Nam at lectus urna duis convallis convallis tellus id. Tellus id interdum velit laoreet id donec. Nunc faucibus a pellentesque sit amet porttitor </p>

   </div> <!-- end of video -->

 </div> <!-- end of content -->

<footer class="footer">test</footer>

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...