Replace a video with another in an IFrame using JQuery or Javascript

Question

I have the following html and jquery - I am trying to replace the initial video loaded with the video in the hidden span tag. The src of the IFrame is replaced but the video disappears and nothing is displayed. I believe it might have something to do with the way the file is hosted and rendered by the hosting company. I have tried the JQuery reload and the clone but no joy. Perhaps someone has come across a similar problem

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

Bojan Petkovski · Accepted Answer · 2014-10-30 23:21:40Z

1

Here you are :)

$(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>

answered Oct 30, 2014 at 23:21

Bojan Petkovski

6,9511 gold badge27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul Over a year ago

Thanks Bojan - I only wish I asked this question 6hours ago....been tearing my hair out- -- so it seem seems that the 1.9.1 is the answer and putting the url in data-video attribute -

Collectives™ on Stack Overflow

Replace a video with another in an IFrame using JQuery or Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related