如何显示阻止一个元素并在另一个div中显示？

$(document).ready(function(){
    $( "#result>div>img" ).click(function(){
	    var vid = $(this).prev().attr( "src" );
	    $( ".large-video" ).html( '<iframe width="220" height="115" src="' + vid + '"></iframe>' );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="result">
    <div class="testt-1">
        <h2 class="t1"> Name Tags </h2>
        <iframe id="video-1" width="220" height="115" src="http://www.youtube.com/embed/2vwBkTRDczc" style="display:none;"></iframe>
        <img id="img-1" src="https://img.youtube.com/vi/2vwBkTRDczc/0.jpg">
    </div>

    <div class="testt-2">
        <h2 class="t1"> Yak Chews </h2>
        <iframe id="video-2" width="220" height="115" src="http://www.youtube.com/embed/JQgFDi-vu1w" style="display:none;"></iframe>
        <img id="img-2" src="https://img.youtube.com/vi/JQgFDi-vu1w/0.jpg">
    </div>

    <div class="testt-3">
        <h2 class="t1"> tags </h2>
        <iframe id="video-3" width="220" height="115" src="http://www.youtube.com/embed/I1K3lrSsde4" style="display:none;"></iframe>
        <img id="img-3" src="https://img.youtube.com/vi/I1K3lrSsde4/0.jpg">
    </div>

    <div class="testt-4">
        <h2 class="t1"> Yak Chews Bone </h2>
        <iframe id="video-4" width="220" height="115" src="http://www.youtube.com/embed/yah872hDA8I" style="display:none;"></iframe>
        <img id="img-4" src="https://img.youtube.com/vi/yah872hDA8I/0.jpg">
    </div>

    <div class="testt-5">
        <h2 class="t1"> test </h2>
        <iframe id="video-5" width="220" height="115" src="http://www.youtube.com/embed/PJQbuIarVgA" style="display:none;"></iframe>
        <img id="img-5" src="https://img.youtube.com/vi/PJQbuIarVgA/0.jpg">
    </div>
</ul>
<div class="large-video" data-id="large-video"></div>