Swapping content of div, on click on image or iframe (Vimeo)

Question

I have some issue:

I have some container, and three elements below this div. Three elements are images or iframe with vimeo embedded movie.

In first case i have :

<div id="media-content">
  <iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>

And below:

<div class="media-list" id="media-list">
                <span> <?php echo $this->Html->image('placeholder/video2.jpg');?>  </span>
                <span> <?php echo $this->Html->image('placeholder/video3.jpg');?>  </span>
                <span>
                    <iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                </span>
            </div>

And Jquery:

var media = $('#media-list img');
    var mediaContainer = $('#media-content');
    $(media).on('click',function(e){
        var vals = $(this).parent().html();
        $(mediaContainer).html(vals);
        e.preventDefault();
        console.log (e.target);
    });

And now what this code does:

On clicking on video2.jog or video3.jpg, iframe in <div id="media-content"> is replaced with this clicked image. And this is ok.

But i want to show vimeo movie <div id="media-content"> on click at iframe inside.

So it's simple content swap, but the problem is, that i don't know how "transfer" vimeo iframe do another div, as clicking on it does nothing.

Thank You for any reply.

PS: To address this question, i send image, it shows 3 red spans and one big green div. CLicking on span should set his attr (in this case img).And this work, problem is,that clicking on vimeo span should open video in green div.enter image description here

Answer 1

When the browser loads/makes ready the DOM then iframe isn't included instantly. For the shake javascript or jquery canot get the inside element of the iframe as DOM haven't it, rather javascript or jquery only get the iframe tag.This is a critical and great problem with jquery & iframe when iframe load thing from different domain/host.
You can also get the iframe element by getting the span with jquery. But for this you have to give the 3rd span a a div and have to click on the div not on the iframe content to get desired solution.

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div> 
 <div class="media-list" id="media-list"> 
            <span> <?php echo $this->Html->image('placeholder/video2.jpg');?>  </span>
            <span> <?php echo $this->Html->image('placeholder/video3.jpg');?>  </span>

      <span >  
         <div style="border: 1px solid red; z-index:3;width:80px;height:80px;padding:30px;">
         <iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
         </div> 
     </span>   
 </div> 
<script>
$(document).ready(function () {
var media = $('#media-list img');   
var mediaContainer = $('#media-content'); 
    $(media).on('click',function(e){ 
        var vals = $(this).parent().html();
        $(mediaContainer).html(vals); 
        e.preventDefault();
        console.log (e.target);
    }); 
var media2 = $('#media-list div');  
    $(media2).on('click',function(e){ 
        var vals = $(this).html();
        $(mediaContainer).html(vals).height("70%").width("70%");
         e.preventDefault();
        console.log (e.target);
    }); 
 });
</script>