使用 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>