Как получить видеоролик YouTube для изменения размера для мобильных устройств, когда в DIV

Question

У меня есть видео на YouTube в DIV, которое, похоже, не изменится, чтобы оно соответствовало окну браузера мобильного экрана.

Цель состоит в том, чтобы иметь 3 секции на настольном компьютере: YouTube видео (раздел 1) SPACING (раздел 2) Текст (раздел 3) (в строке слева направо)

На мобильном устройстве , цель состоит в том, чтобы: Видео YouTube, соответствующее ширине экрана (раздел 1) ПРОСТРАНСТВО (раздел 2) (Я бы хотел, чтобы этого не было здесь ... но это необходимо, чтобы между видео и текстом настольный компьютер) Текст (раздел 3) (вниз по странице сверху вниз)

Вот код. Обратите внимание: я не кодирую для жизни, поэтому я действительно мог бы с этим помочь. Спасибо!

<style type="text/css"><!-- 
.section1 { 
    display: inline-block; 
    vertical-align: top; 
    width: 450px; 
background-color:white; 
} 
.section2 { 
    display: inline-block; 
    vertical-align: top; 
width: 10px; 
background-color:white; 
} 
.section3 { 
    display: inline-block; 
    vertical-align: top; 
    border: 10px double #191919; 
    padding: .600em; 
    width: 450px; 
background-color: #e5e5e5; 
} 
--></style> 

<center> 
<div class="section1"><iframe width="400" height="225" src="https://www.youtube.com/embed/auukuYuizq4" frameborder="0" allowfullscreen=""></iframe> 

<div class="section2"> </div> 
<div class="section3">Text here</div> 
</center> 

Answer 1

Рассматривали ли вы с помощью grid или flex?

.container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
} 
 

 
.section1 { 
 
    background-color: white; 
 
} 
 

 
.section2 { 
 
    vertical-align: top; 
 
    width: 100px; 
 
    background-color: white; 
 
} 
 

 
.section3 { 
 
    border: 10px double #191919; 
 
    padding: .600em; 
 
    width: 450px; 
 
    background-color: #e5e5e5; 
 
}

<div class="container"> 
 
    <div class="section1"> 
 
    <iframe width="400" height="225" src="https://www.youtube.com/embed/auukuYuizq4" frameborder="0" allowfullscreen=""></iframe> 
 
    </div> 
 
    <div class="section2"> 
 
    </div> 
 
    <div class="section3"> 
 
    Text here 
 
    </div> 
 
</div>