How to display block an element and display in another div?

Question

I have the youtube video and the video thumbnail. By default, videos are hidden.

I want to display related video on click the video thumbnail and display in the another div.

Below is my HTML:

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

Video and thumbnail are listing using for-each loop by PHP code.

Eddie · Accepted Answer · 2017-12-09 05:50:09Z

1

If you want to show the video if the image is clicked.

You can use:

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

Here is complete sample code:

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

edited Dec 9, 2017 at 5:50

answered Dec 9, 2017 at 5:22

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

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

13 Comments

Vinod Kumar Over a year ago

Thanks for your reply. I want to display video in another div <div class="large-video" data-id="large-video"></div> And don't want to hide image

Eddie Over a year ago

So you want to add another div and put the video on it?

Eddie Over a year ago

Under the image?

Vinod Kumar Over a year ago

video and image is coming from foreach loop, so How can I use video in another div outside loop

Vinod Kumar Over a year ago

thanks, it is working fine. I have used your code like this: jQuery(document).ready(function(){ jQuery('body').on('click','#result>div>img',function(){ var vid = jQuery(this).prev().attr( "src" ); jQuery( ".large-video" ).html( '<iframe width="900" height="600" src="' + vid + '"></iframe>' ); }); });

|

user9075324 · Accepted Answer · 2017-12-09 05:34:11Z

1

In your JS file you've to grab the value of the image src attribute of a particular thumbnail onclick and grab the div you want to display it to and then append video tag to the div where the video src value is the value of the grabbed thumbnail image.

answered Dec 9, 2017 at 5:34

user9075324

71 bronze badge

Collectives™ on Stack Overflow

How to display block an element and display in another div?

2 Answers 2

13 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related