Question

I see my desgin here http://www.doublezerofilms.com/doublezero-template-webSamples.html

I want to make a vimeo iframe embed play in the div above when clicked. I’m just not sure how to do it. Any suggestion would be greatly appreciated.

here is my mark up

<div id="content">
            <div id="videoBox">
                <!--Slider Begin-->
                <div id="outterGPlayerBox">
                    <div id="GPlayerBox">
                        <div id="leftsidePlayer">Here are some videos about what we do</div><!--end of leftsidePlayer-->
                        <div id="rightsidePlayer">

                        </div><!--end of rightsidePlayer-->
                    </div><!--end of GPlayer Box-->   
                </div><!--end of outterGPlayerBox-->   
                <!--Slider End-->
            </div><!--end of videoBox-->
                <div id="banner">
                    <div class="thumbsWrap">
                        <div>
                            <div id="Thumb1" class="fadehover">
                            <img src="images/thumb1.jpg" alt="" class="a" />
                            <img src="images/thumb1-over.jpg" alt="" class="b" />
                            </div>

                            <div id="Thumb2" class="fadehover">
                            <img src="images/thumb2.jpg" alt="" class="a" />
                            <img src="images/thumb2-over.jpg" alt="" class="b" />
                            </div>

                            <div id="Thumb3" class="fadehover">
                            <img src="images/thumb3.jpg" alt="" class="a" />
                            <img src="images/thumb3-over.jpg" alt="" class="b" />
                            </div>

                            <div id="Thumb4" class="fadehover" style="margin:0px">
                            <img src="images/thumb4.jpg" alt="" class="a" />
                            <img src="images/thumb4-over.jpg" alt="" class="b" />
                            </div>
                        </div>
                    </div><!--end of thumbsWrap-->
                </div><!--end of banner-->

I want the video to open in the rightsidePlayer div when the thumbnail is clicked

thanks!

Answer 1

$("#rightsidePlayer").html('<iframe src="http://player.vimeo.com/video/VIDEO_ID" width="WIDTH" height="HEIGHT" frameborder="0"></iframe>');