How to get YouTube video to re-size for mobile when in a DIV

Vote count: 0

I have a YouTube video in a DIV that won't seem to re-size to fit a mobile screen's browser window.

The goal is to have 3 sections on a desktop computer: YouTube Video (section 1) SPACING (section 2) Text (section 3) (in a line from left to right)

On a mobile device, the goal is to have: YouTube Video, fit to screen width (section 1) SPACING (section 2) (I wish this wasn't here... but it's needed so there's space between the video and the text on a desktop computer) Text (section 3) (going down the page from top to bottom)

Here's the relevant code. Please note: I don't code for a living, which is why I could really use some help with this. Thank you!

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

asked 39 secs ago

TRichardson2200

Let's block ads! (Why?)

How to get YouTube video to re-size for mobile when in a DIV