2 Attachment(s)
responsive 2 columns with youtube video problem
On this page I have 2 youtube videos side by side in columns. It appears fine when I look at it full screen.
Attachment 5640
When I have a smaller screen, the images are right into each other sideways, and when it's mobile sized, the videos hang out of the container.
Attachment 5641
html for that part
Code:
<div class="section group">
<div class="col span_1_of_2">
<iframe width="450" height="363" src="https://www.youtube.com/embed/aaINOaWt938?rel=0?" frameborder="0" allowfullscreen></iframe>
<p>Click Above To View Testimonial Video!</p>
</div>
<div class="col span_1_of_2">
<iframe width="450" height="363" src="https://www.youtube.com/embed/e6UWqeLaMm4?rel=0?" frameborder="0" allowfullscreen></iframe>
<p>Click to see Peter in seminar action!</p>
</div></div>
<div style="clear:both"></div>
Css for that part
Code:
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.5%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.25%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}
@media only screen and (max-width: 480px) {
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 100%;
}
}
