responsive 2 columns with youtube video problem

[Beverleyh]

I'm looking at your page here: http://www.pscompetitiveedge.com/references.html because its easier to troubleshoot in a live page, and make live edits with the help of the Developer Toolbar that comes bundled with all popular browsers.

You can do the same - To open the Developer Toolbar, hit F12 and click on the element to inspect (or, depending on browser, right-click into the browser window and choose 'inspect element' from the context menu), then you can fine-tune the applied styles on the right until elements behave as you'd expect.

Looking at your page (http://www.pscompetitiveedge.com/references.html) logically, try to consider what effect each style definition is having on the element while you make your changes.

TIP: If 'A' is 50% wide and it is inside 'B' that is also 50% wide, 'A' will actually be 25% wide overall.

So have a think about what applied styles you need to disable to make the videos 50%

[mlegg]

I can't figure it out. I may just switch the videos to images and link the image to the video.

[Beverleyh]

The quickest fix would be to remove the "left" and "right" classes here;

<div class="columns">
    <div class="left"><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>
    <div class="right"><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>

But this introduces a glitch with floats and the videos butting up against the circular music icon above, so they also need to be cleared. You can do that by using one of your existing classes in the "col-1" div. I've added that in blue so you can see where it goes.

So to summarise, remove the classes in red, and added the class in blue.

Does that solve it?

[mlegg]

unfortunately that didn't work, I think I will go back to how it was with images that link to the videos and use the grid system for the whole page.
I'll let you know how that worked out. Thank you

[molendijk]

Something like this,perhaps?

<div style="position: relative; max-width:450px; width: 40%; height:40%; max-height: 363px; float: left; margin-left: 5%">
<iframe style="position: relative; width:100%; height:100%; " src="https://www.youtube.com/embed/aaINOaWt938?rel=0?" frameborder="0" allowfullscreen></iframe><br>
<div style="text-align: center">Click Above To View Testimonial Video!</div>
</div>

<div style="position: relative; max-width:450px; width: 40%; height:40%; max-height: 363px; float: right;  margin-right: 5%">
<iframe style="position: relative; width:100%; height:100%; " src="https://www.youtube.com/embed/e6UWqeLaMm4?rel=0?" frameborder="0" allowfullscreen></iframe>
<div style="text-align: center">Click to see Peter in seminar action!</div>
</div>

<div style="clear:both"></div>

[mlegg]

That works to keeep them side by side but the height is not proportionate to the ratio of the video. The width is fine but the height is too short.

live page with your code

[Beverleyh]

unfortunately that didn't work, I think I will go back to how it was with images that link to the videos and use the grid system for the whole page.
I'll let you know how that worked out. Thank you

i think the confusion stems from trying to mix your existing grid system with my working demo here http://fofwebdesign.co.uk/template/_...rwd-videos.htm (although when I tested here - the red/blue class changes - it worked fine)

Try copying and pasting from my demo again but without trying to combine it with any other containers. Just paste the exact markup into your main outer container (not inside any other columns) and add the css to the bottom of your stylesheet.

[molendijk]

Try this. It works for me. It's a combination of YouTube-thumbnails and jquery

<!doctype html>
<html >
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<title>&nbsp;</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<div style="position: relative; max-width:450px; width: 40%;  max-height: 363px; float: left;  margin-left: 5%; background: black">
<img id="yt_thumb_left" src="http://img.youtube.com/vi/aaINOaWt938/hqdefault.jpg" alt="" style="position: absolute; width: 100%; border: 1px solid black; " >
<iframe id="left_frame" name="left_frame" src=null frameborder="0" allowfullscreen style="width: 100%; height: 100%"></iframe>
<div style="text-align: center; background: white">
<button style="cursor: pointer" onclick="frames.left_frame.location.replace('https://www.youtube.com/embed/aaINOaWt938?autoplay=1&rel=0'); document.getElementById('yt_thumb_left').style.visibility='hidden'">Play</button>
<button style="cursor: pointer" onclick="frames.left_frame.location.replace(null); document.getElementById('yt_thumb_left').style.visibility='visible'">Stop</button>
</div>
</div>


<div style="position: relative; max-width:450px; width: 40%;  max-height: 363px; float: right;  margin-right: 5%; background: black">
<img id="yt_thumb_right" src="http://img.youtube.com/vi/e6UWqeLaMm4/hqdefault.jpg" alt="" style="position: absolute; width: 100%; border: 1px solid black; ">
<iframe id="right_frame" name="right_frame" src=null frameborder="0" allowfullscreen style="width: 100%; height: 100%"></iframe>
<div style="text-align: center; background: white">
<button style="cursor: pointer" onclick="frames.right_frame.location.replace('https://www.youtube.com/embed/e6UWqeLaMm4?autoplay=1&rel=0'); document.getElementById('yt_thumb_right').style.visibility='hidden'">Play</button>
<button style="cursor: pointer" onclick="frames.right_frame.location.replace(null); document.getElementById('yt_thumb_right').style.visibility='visible'">Stop</button>
</div>
</div>

<div style="clear:both"></div>


<!-- This script must be put immediately before the closing body tag -->
<script>
function resize_frame()
{
document.getElementById('left_frame').style.height=$('#yt_thumb_left').height()+'px';
document.getElementById('left_frame').style.width=$('#yt_thumb_left').width()+'px';

document.getElementById('right_frame').style.height=$('#yt_thumb_left').height()+'px';
document.getElementById('right_frame').style.width=$('#yt_thumb_left').width()+'px';
}
resize_frame();
window.onresize=function(){resize_frame()}
</script>

</body>

</html>

[molendijk]

No offense, but may I add that this Peter Scott, given his age, should have reached a certain level of modesty and wisdom instead of acting like an adolescent shouting and yelling around? I'm really astonished about this.

[mlegg]

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.



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