Embed Video in Parallax Slider?

[dmwhipp]

1. Script: Parallax Slider
2. URL: http://www.dynamicdrive.com/dynamici...ider/index.htm
3. Issue: Would like to embed a video into the slide. I have it set up on a sample page here: http://www.cisfl.org/sample1.html The video is embedded as the 4th slide, but it only works in Internet Exploder, not Chrome or
FF.

I tried changing

<div class="bgoverlay" data-bgimage="/graphics/slider03.jpg"></div>

to

<div class="bgoverlay"></div>

to lose the image, but no luck.
Any help getting a video embedded and working on all major browsers would be greatly appreciated.
Thanks,
Deborah

[molendijk]

Try this:

<div class="slide" >
<div class="bgoverlay"></div>
<div class="desc">
<iframe style="position: relative; width: 100%; height: 100%"  src="http://www.youtube.com/embed/7OmAiEvGp7A" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

[dmwhipp]

Thank you!

[dmwhipp]

Okay, I have a new request - remove the video title and add a caption instead. I moved the iframe up into the bgoverlay so I could use the desc div for the caption, and everything appears to be working, except of course the video doesn't appear at the top of the div, which I know they will ask me to try to rectify.

Here is the coding:

<div class="slide">
   <div class="bgoverlay"><iframe id="thevidiframe" style="position:relative; width:100%; height:100%; border:0;" src="http://www.youtube.com/embed/7OmAiEvGp7A?&amp;wmode=transparent&amp;showinfo=0&amp;" allowfullscreen></iframe></div>
   <div class="desc">
	<div style="position:absolute; width:300px; top:45px; left:15px; background:#000; padding:10px; border-radius:10px;">
	This is where the video caption will go.	
	</div>
   </div>
</div>

Here is the result: http://www.cisfl.org/sample1.html

The video is the 3rd slide. I'm testing out different methods on different sample pages (add vertical-align, YouTube parameters, etc.) with no luck so far.

I'm not sure what is causing that blank black bar across the top of the video, even after using Google Developer Tools - is that padding from somewhere, or the empty YouTube title bar?

Deborah

[dmwhipp]

I have it working with the video displaying at the top (http://www.cisfl.org/sample1.html) by including inline style with a negative top margin:

<div class="slide">
   <div class="bgoverlay"><iframe id="thevidiframe" style="position:relative; width:100%; height:100%; border:0; margin-top:-38px;" src="http://www.youtube.com/embed/7OmAiEvGp7A?&amp;wmode=transparent&amp;showinfo=0&amp;" allowfullscreen></iframe></div>
   <div class="desc">
	<div style="position:absolute; width:300px; top:15px; left:15px; background:#000; padding:10px; border-radius:10px;">
	<span style="font-size:20px;">Whatever It Takes</span><br>Featuring CIS Chair Elaine Wynn.	
	</div>
   </div>
</div>

I think I'll determine the proper dimensions for embedding videos to get rid of the negative margin (960 x 540?) and adjust the CSS file and rest of the slides accordingly.
Deborah