ie9替换iframe问题

Question

我们目前正在为客户开发一个网站，我们已经告知他们使用ie9但对要求非常严格。

这是有4个占位符图片，点击时会打开iframe，如果点击，则用不同的视频替换iframe。

简单到实现我们在现代浏览器中的用途，我遇到的问题是页面在ie9中重新加载并且在点击时不会打开任何iframe。 （代码非常粗糙，但客户端的时间范围是<1小时，而另一位开发人员在会议中几乎坐在客户旁边，而且工作正常）

JS

 if ( $('#videoLinksMain').length ) {
    //          //switch out video placeholder with video
                function playVideo2(){
                    thevid=document.getElementById('thevideo'); 
                    thevid.style.display='block'; 
                    this.style.display='none';
                }
                            //click
                $('#videoLink1').click(function(){
                                console.log("clicked videoLink1");
                                var videoSRC = "https://www.youtube.com/embed/videolink?rel=0&autoplay=1"
                                var thevid=document.getElementById('thevideo');
                                $(thevid).slideDown(function() {
                                    $("#ytVideo")[0].src = videoSRC + "&autoplay=1";
                                });
                });
                            $('#videoLink2').click(function(){
                                console.log("clicked videoLink2");
                                var videoSRC = "https://www.youtube.com/embed/videolink?rel=0&autoplay=1"
                                var thevid=document.getElementById('thevideo');
                                $(thevid).slideDown(function() {
                                    $("#ytVideo")[0].src = videoSRC + "&autoplay=1";
                                });
                });
                            $('#videoLink3').click(function(){
                                console.log("clicked videoLink3");
                                var videoSRC = "https://www.youtube.com/embed/videolink?rel=0&autoplay=1"
                                var thevid=document.getElementById('thevideo');
                                $(thevid).slideDown(function() {
                                    $("#ytVideo")[0].src = videoSRC + "&autoplay=1";
                                });
                });
                            $('#videoLink4').click(function(){
                                console.log("clicked videoLink4");
                                var videoSRC = "https://www.youtube.com/embed/videolink?rel=0&autoplay=1"
                                var thevid=document.getElementById('thevideo');
                                $(thevid).slideDown(function() {
                                    $("#ytVideo")[0].src = videoSRC + "&autoplay=1";
                                });
                });
                            //hover
                            $('#videoLink1').hover(
                                function(){
                                    $text = "";
                                    $('#videoDesc p').replaceWith("<p>" + $text + "</p>");
                                    $('#videoDesc p').fadeIn("slow");
                                },function(){
                                    $('#videoDesc p').fadeOut();
                                }
                            );
                            $('#videoLink2').hover(
                                function(){
                                    $text = "";
                                    $('#videoDesc p').replaceWith("<p>" + $text + "</p>");
                                    $('#videoDesc p').fadeIn("slow");
                                },function(){
                                    $('#videoDesc p').fadeOut();
                                }
                            );
                            $('#videoLink3').hover(
                                function(){
                                    $text = "";
                                    $('#videoDesc p').replaceWith("<p>" + $text + "</p>");
                                    $('#videoDesc p').fadeIn("slow");
                                },function(){
                                    $('#videoDesc p').fadeOut();
                                }
                            );
                            $('#videoLink4').hover(
                                function(){
                                    $text = "";
                                    $('#videoDesc p').replaceWith("<p>" + $text + "</p>");
                                    $('#videoDesc p').fadeIn("slow");
                                },function(){
                                    $('#videoDesc p').fadeOut();
                                }
                            );
            }//end .length

HTML

<div class="col-md-4 " id="videoLinksMain">
                            <div class="row">
                                <!--<img src="images/play-button-light-blue.png" class="img-responsive btnPlaySml">-->
                               <!-- <img src="images/vtLink-placeholder-2.png" class="img-responsive" id="videoLink1"> -->
                               <a href="#thevideo" onclick="loadFrame(this)" target="_top" data-src="https://www.youtube.com/embed/videolink?rel=0&autoplay=1"><img src="images/vtLink-placeholder-2.png" class="img-responsive" id="videoLink1"></a> 
                            </div>
                            <div class="row margin-top-half" id="videoLinksThumbs">
                                <div class="col-md-4">
                                    <!--<img src="images/play-button-light-blue.png" class="img-responsive btnPlayTbn">-->
                                    <a href="#thevideo" onclick="loadFrame(this)" target="_top" data-src="https://www.youtube.com/embed/videolink?rel=0&autoplay=1"><img src="images/vtLink-placeholder-1.png" class="img-responsive" id="videoLink2"></a>
                                </div>
                                <div class="col-md-4">
                                    <a href="#thevideo" onclick="loadFrame(this)" target="_top" data-src="https://www.youtube.com/embed/videolink?rel=0&autoplay=1"><img src="images/vtLink-placeholder-3.png" class="img-responsive" id="videoLink3"></a>
                                    <!-- <img src="images/vtLink-placeholder-3.png" class="img-responsive" id="videoLink3"> -->
                                </div>
                                <div class="col-md-4">
                                   <!-- <img src="images/vtLink-placeholder-4.png" class="img-responsive" id="videoLink4"> -->
                                <a href="#thevideo" onclick="loadFrame(this)" target="_top" data-src="https://www.youtube.com/embed/videolink?rel=0&autoplay=1"><img src="images/vtLink-placeholder-4.png" class="img-responsive" id="videoLink4"></a>
                                </div>
                            </div>
                            <div class="row text-center" id="videoDesc">                                
                                <p style="display:none;">This text is here to help give a textual description of each video</p>
                            </div>