PDA

View Full Version : Embed Video in Parallax Slider?



dmwhipp
11-17-2014, 10:42 PM
1. Script: Parallax Slider
2. URL: http://www.dynamicdrive.com/dynamicindex17/parallaxslider/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
11-18-2014, 12:21 AM
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
11-18-2014, 12:41 AM
Thank you!

dmwhipp
11-25-2014, 09:05 PM
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
11-25-2014, 10:45 PM
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