responsive 2 columns with youtube video problem

[mlegg]

the HTML is too long to post, so here it is in the attachment

[molendijk]

On small screens, the video on the left is a bit higher than the one on the right because of pause.png. You should give that image an absolute position.

The page I gave you validates except for autoplay=1&rel=0 and frameborder="0". That's no issue at all. If you want the page to validate, replace & with & and remove frameborder="0". Your own online page, on the other hand, has many validation errors. Try to fix it.

The black space above the footer has nothing to do with my code. That's another subject.

[Beverleyh]

This works fine - http://fofwebdesign.co.uk/template/_...g/rwd2vids.htm - the only thing I did was;

- return my markup to the web page
- move the video CSS to the bottom of your stylesheet
- put the .vid-content in the HTML markup (you had it in the stylesheet but not in the HTML)
- add greater specificity to the CSS with the .vid-content selector
- fine-tuning: override 2 definitions (margin and float) from elsewhere (but only for the .vid-content container)

CSS

.vid-content { padding:1em; max-width:64em; margin:auto }
.videoWrapper { position:relative; padding-bottom:56.25%; padding-top:25px; height:0 }
.videoWrapper iframe { position:absolute; top:0; left:0; width:100%; height: 100% }
.vid-content .col, .vid-content .col * { box-sizing:border-box }
.vid-content .col { padding:2% 0; margin:0; float:none }

@media ( min-width:35em ) { /* #### - > 560px (560 / 16 = 35) - 16px being default browser font-size - #### */
	.vid-content .col { width:50%; padding:2% }
	.vid-content .col-1 { float:left }
	.vid-content .col-2 { float:right }
}

HTML

<div class="vid-content">
<div class="col col-1 clear">
	<div class="videoWrapper">
		<iframe width="450" height="363" src="https://www.youtube.com/embed/aaINOaWt938?rel=0?" frameborder="0" allowfullscreen></iframe>
	</div>
	<p>Click Above To View Testimonial Video!</p>
</div>
<div class="col col-2">
	<div class="videoWrapper">
		<iframe width="450" height="363" src="https://www.youtube.com/embed/e6UWqeLaMm4?rel=0?" frameborder="0" allowfullscreen></iframe>
	</div>
	<p>Click Above To View Peter In Seminar Action!</p>
</div>
</div>

ps - to stop the video on the left being a little higher, you can clear it with the .clear class already in your stylesheet as per my previous suggestion here: http://www.dynamicdrive.com/forums/s...620#post311620 (I've put that back into the markup in blue)

[Beverleyh]

I know, I asked him about that but he says that in the casinos that they almost have to tell to be heard.

The side by side responsive videos work the way you coded it:
http://www.pscompetitiveedge.com/rwd2vids.html

One thing, the video on the left is a bit higher than the one on the right. It's more noticeable when the page is scaled down.

Attachment 5649

Lastly, I ran the code through a validator. The nav menu code doesn't quite validate but it works. Also, at the bottom of the page, there is a black space under the content and above the footer. I've tried adding a </div> or 2 and deleting a </div> or 2 but can't quite get it to work properly

Attachment 5650

Not sure about other devices, but here's how this method looks and behaves on iPhone 5S http://fofwebdesign.co.uk/template/_...uery-thumb.mov

[Beverleyh]

And a comparison iPhone 5S video for the alternative method: http://fofwebdesign.co.uk/template/_...-thumb-bev.mov

Both methods tested in Safari, Chrome and Mercury browsers - same behaviour as the videos show.

[mlegg]

That worked great for the videos Bev. I still cannot figure out what div is open or an extra closed to leave a space between the white content and the orange footer.
I can't wait until I'm done with this project.

[Beverleyh]

That would be courtesy of this line here;

<p style="text-align:center">Call For Your Complimentary Consultation (520) 977-5695</p>

<p> tags have default margins that are pushing the divs either side apart - hence the black gap. If you zero the margin, the gap will close;

<p style="text-align:center; margin:0">Call For Your Complimentary Consultation (520) 977-5695</p>

If you need extra space once that is set, try putting on some padding (padding creates space internally, margin creates space externally)

[mlegg]

Thanks I didn't realize that, obviously :P