Video stays inline on mobile - html

Question

i have set up a gallery on my website which displays a large embedded video with 3 thumbnail embedded videos underneath which looks great on the desktop but as i switch to the phone view the 3 thumbnail videos stay in line and dont drop underneath each other as i imagined. Meaning you have to scroll away from the phone screen to view. could someone please advise as to what i need to do? below is the html and css code.
.vid-container {
position: relative;
padding-bottom: 52%;
padding-top: 30px;
height: 0;
}
.vid-container iframe,
.vid-container object,
.vid-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.vid-list-container {
width: 92%;
overflow: hidden;
margin-top: 20px;
margin-left:4%;
padding-bottom: 20px;
}
.vid-list {
width: 1344px;
position: relative;
top:0;
left: 0;
}
.vid-item {
display: block;
position: relative;
width: 18%;
height: 18%;
float: left;
margin: 0;
padding: 10px;
}
.thumb {
overflow:hidden;
height: 84%;
}
.thumb img {
width: 100%;
position: relative;
top: -13px;
}
.vid-item .desc {
color: #21A1D2;
font-size: 15px;
margin-top:5px;
}
<div class="container">
<div class="row">
<div class="m-3 col-xs-7 col-sm-6 col-lg-8">
<h3>This week we are watching....</h3>
<div class="embed-responsive embed-responsive-16by9">
<iframe id="vid_frame" src="https://www.youtube.com/embed/RfuNhK_o9no" frameborder="0"></iframe>
</div>
<div class ="vid-list">
<div class="vid-item" onClick="document.getElementById('vid_frame').src='https://www.youtube.com/embed/HBmDFJRwzQ8'">
<div class="thumb">
<img src="http://img.youtube.com/vi/HBmDFJRwzQ8/0.jpg" alt="" />
</div>
<div class="desc">
Living a healthy lifestyle doesn’t always come easy! But with this one pot meal it doesnt get much easier
</div>
</div>
<div class="vid-item" onClick="document.getElementById('vid_frame').src='https://www.youtube.com/embed/U0jggZfufGU'">
<div class="thumb">
<img src="http://img.youtube.com/vi/U0jggZfufGU/0.jpg" alt="" />
</div>
<div class="desc">
Hey everyone welcome back! Today I have some easy and delicious summer treats! These are easy and inexpensive treats and taste amazing! I hope you enjoyed!
</div>
</div>
<div class="vid-item" onClick="document.getElementById('vid_frame').src='https://www.youtube.com/embed/p4b2rFW8cms'">
<div class="thumb">
<img src="http://img.youtube.com/vi/p4b2rFW8cms/0.jpg" alt="" />
</div>
<div class="desc">
From the archives: Once again Gennaro invites us into his home to show us another wholesome home cooked meal.
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

make sure that if you added view port meta <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=2, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi" />
like above, also your media query does not respond without viewport for responsive

Answer 2

Guess you want to achieve this?
If you are already using bootstrap why not use another nested row for the videos below the 'main'-video?
I replaced the .vid-list class with a .row bootstrap class and assumed that you want to have three other videos below the main video. Since bootstrap is using 12 columns i divided 12 by 3 and got 4. So i used .col-md-4 to use 4 columns for one video. On small devices you want to use the full length so you are using .col-sm-12.
And try to avoid using negative top and margin values. I also cleared up some (not everything) of unnecessary code.
.vid-container {
position: relative;
padding-bottom: 52%;
padding-top: 30px;
height: 0;
}
.vid-container iframe,
.vid-container object,
.vid-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.vid-list-container {
width: 92%;
overflow: hidden;
margin-top: 20px;
margin-left:4%;
padding-bottom: 20px;
}
.vid-list {
margin-top: 10px;
}
.thumb {
overflow:hidden;
height: 84%;
}
.thumb img {
width: 100%;
position: relative;
top: -13px;
}
.vid-item .desc {
color: #21A1D2;
font-size: 15px;
margin-top:5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="m-3 col-xs-7 col-sm-6 col-lg-8">
<h3>This week we are watching....</h3>
<div class="embed-responsive embed-responsive-16by9">
<iframe id="vid_frame" src="https://www.youtube.com/embed/RfuNhK_o9no" frameborder="0"></iframe>
</div>
<div class ="row vid-list">
<div class="vid-item col-sm-12 col-md-4" onClick="document.getElementById('vid_frame').src='https://www.youtube.com/embed/HBmDFJRwzQ8'">
<div class="thumb">
<img src="http://img.youtube.com/vi/HBmDFJRwzQ8/0.jpg" alt="" />
</div>
<div class="desc">
Living a healthy lifestyle doesn’t always come easy! But with this one pot meal it doesnt get much easier
</div>
</div>
<div class="vid-item col-sm-12 col-md-4" onClick="document.getElementById('vid_frame').src='https://www.youtube.com/embed/U0jggZfufGU'">
<div class="thumb">
<img src="http://img.youtube.com/vi/U0jggZfufGU/0.jpg" alt="" />
</div>
<div class="desc">
Hey everyone welcome back! Today I have some easy and delicious summer treats! These are easy and inexpensive treats and taste amazing! I hope you enjoyed!
</div>
</div>
<div class="vid-item col-sm-12 col-md-4" onClick="document.getElementById('vid_frame').src='https://www.youtube.com/embed/p4b2rFW8cms'">
<div class="thumb">
<img src="http://img.youtube.com/vi/p4b2rFW8cms/0.jpg" alt="" />
</div>
<div class="desc">
From the archives: Once again Gennaro invites us into his home to show us another wholesome home cooked meal.
</div>
</div>
</div>
</div>
</div>
</div>