使用JQuery或Javascript在IFrame中替换另一个视频

Question

我有以下html和jquery - 我试图用隐藏的span标记替换视频加载的初始视频。 IFrame的src被替换，但视频消失并且不显示任何内容。我相信这可能与托管公司托管和呈现文件的方式有关。我已经尝试过JQuery重载和克隆，但没有喜悦。也许有人已经遇到了类似的问题

<script src="https://code.jquery.com/jquery-1.4.2.js"></script> 
<script type="text/javascript" language="javascript"> 
$(document).ready(function() { 
    $(".hoveritem").click(function() {  
     var itemtext = '#' + $(this).attr('rel');   
     var videolink = itemtext + 'vid';   
     $("#contentvid").attr('src', $(videolink).html()); 
     //$("#contentvid").replaceWith($("#contentvid")).clone(); 

    }); 
}); 

</script> 
<style> 
    .hoveritem{cursor:pointer} 
</style> 
<div> 

<div> 
    <div id="contenttext">    
     <div style="float:left;;"> 
      <h3>Hello</h3> 
      <p>Click the buttom to replace the video</p> 
     </div> 
    </div> 
    <div class="VideoArea" style="border:solid 1px black"> 
     <iframe id="contentvid" width="230" height="120" src="0" frameborder="0" style="overflow:hidden" scrolling="no" allowfullscreen></iframe> 
    </div> 
    <div style="clear:both"></div> 
</div> 
<div>&nbsp;</div> 
<div id="GivingGrove" class="hoveritem" rel="givinggrovetext"> 
    <div id="givinggrovetext"> 
     <div > 
      <div class="TextArea"> 
      <button value="">Change Video</button> 
      </div> 
      <span id="givinggrovetextvid" style="display:none">h&w=230</span>     
     </div> 
    </div> 
</div> 

Answer 1

给你:)

$(document).ready(function() { 
 
    $(".hoveritem").click(function() { 
 
    var change = $(this).find('.change').data('video'); 
 

 
    $("#contentvid").attr('src', change); 
 

 
    }); 
 
});

.hoveritem { 
 
    cursor: pointer 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 

 
<div> 
 

 
    <div> 
 
    <div id="contenttext"> 
 
     <div style="float:left;;"> 
 
     <h3>Hello</h3> 
 
     <p>Click the buttom to replace the video</p> 
 
     </div> 
 
    </div> 
 
    <div class="VideoArea" style="border:solid 1px black"> 
 
     <iframe id="contentvid" width="230" height="120" src="https://video.homegroup-media.co.uk/video/416Ql4rU1?h=120&w=230" frameborder="0" style="overflow:hidden" scrolling="no" allowfullscreen></iframe> 
 
    </div> 
 
    <div style="clear:both"></div> 
 
    </div> 
 
    <div>&nbsp;</div> 
 
    <div id="GivingGrove" class="hoveritem" rel="givinggrovetext"> 
 
    <div id="givinggrovetext"> 
 
     <div> 
 
     <div class="TextArea"> 
 
      <button class="change" data-video="https://video.homegroup-media.co.uk/video/9RUyIKYxJ?h=120&w=230">Change Video</button> 
 
     </div> 
 
     <span id="givinggrovetextvid" style="display:none"></span> 
 
     </div> 
 
    </div> 
 
    </div>