need clarity on how to move the video tag from one div element into another div element

Question

I've created the video layout, then I've try to working on picture in picture mode, but I didn't dynamically append to move the video element on single click to move the video layout.

like this main-video <--> video-list, video-list <--> main-video

How to append and move and add the video element on single click using JavaScript or jQuery?

 body { margin: 0; } /* mainvideo */.main-video video { transition: all 0.3s ease-in-out; position: absolute; object-fit: cover; height: 100vh; width: 100%; right: 0; left: 0; bottom: 0; z-index: -1; }.main-video #mainlogo { position: absolute; bottom: 2rem; right: 1rem; }.main-video #mainlogo img { width: 40px; }.videoWrap { max-width: 320px; display: inline-block; }.videoWrap #logo { position: absolute; bottom: 2rem; right: 1rem; }.videoWrap #logo img { width: 40px; }.video-list video { transition: all 0.3s ease-in-out; max-width: 320px; margin: 0 1rem 1rem 0; border-radius: 1.25rem; }.user-name { color: #fff; float: left; padding: 0.125rem 0.25rem; background: #000; border-radius: 0.5rem; margin: 0.5rem 0 0 1rem; } @media screen and (max-width:768px) {.videoWrap, .video-list video { max-width: 217px; } } @media only screen and (min-device-width: 200px) and (max-device-width: 992px) and (orientation:landscape) {.videoWrap, .video-list video { max-width: 150px; }.videoWrap, #dropDown { margin: -0.8rem 0.2rem -1.8rem -0.3rem; left: 31px; bottom: 4px; }.videoWrap.user-name { margin: -0.8rem 0.2rem -1.8rem -0.3rem; left: 31px; bottom: 4px; } } @media screen and (max-width:480px) {.videoWrap, .video-list video { max-width: 149px; bottom: 4rem; }.videoWrap #logo { bottom: 1.5rem; }.videoWrap #logo img { width: 30px; } } /* Adding Pip */.CustomMainLogo { max-width: 3rem; position: absolute; bottom: 2rem; right: 2rem; }.enlargeVideoList { transition: all 0.3s ease-in-out; position: absolute; object-fit: cover; height: 100vh; width: 100%; right: 0; left: 0; bottom: 0; z-index: -1; }.index { z-index: 3; } /* @media only screen and (min-device-width: 200px) and (max-device-width: 992px) and (orientation:portrait) {.videoWrap, .video-list video{ max-width: 150px; }.videoWrap, #dropDown { margin: -0.8rem 0.2rem -1.8rem -0.3rem; left: 31px; bottom: 4px; }.videoWrap.user-name{ margin: -0.8rem 0.2rem -1.8rem -0.3rem; left: 31px; bottom: 4px; } } */

 <link rel="stylesheet" href="./bootstrap/bootstrap.min.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="container-fluid m-0" id="videos m-0"> <div class="row vh-100 align-items-end align-items-lg-center m-0"> <div class="col-12 offset-lg-8 col-lg-4 text-center text-lg-end "> <div id="VisualMedia"> <div class=" main-video mainVideoWrap"> <video class="videobg" src="https://www.dropbox.com/s/ve0apo59semvv70/example-video-1.mp4?raw=1" muted></video> <div class=" card-img-overlay p-0 "> <div class="mainCard"> <span class="text-capitalize user-name"> <i class="icon-user pe-1"></i>videoBG </span> <div id="dropDown" class="dropdown float-end"> <button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false"> <i class="icon-dot"></i> </button> <ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu"> <li> <a id="dropdown_items" class="dropdown-item" href="#"> <i class="bi bi-mic-mute m-1"></i>Start Audio</a> </li> <li> <a id="dropdown_items" class="dropdown-item" href="#"><i class="bi bi-camera-video-off m-1"></i>Stop Video</a> </li> <li> <a id="dropdown_items" class="dropdown-item" href="#"><i class="bi bi-person-x m-1"></i>Remove</a> </li> </ul> </div> </div> <div id="mainlogo"> <img src="./client_img.png" alt="logo" class="img-fluid rounded float-end" /> </div> </div> </div> <:-- <div class="row vh-100 align-items-end align-items-lg-center m-0"> --> <div class=" video-list listofvideos"> <div class=" position-relative videoWrap" class="videoWrap1" id="cardvideo_"> <video class="video1" src=" https.//www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2?mp4.raw=1 " muted></video> <div class=" card-img-overlay p-0 listCard"> <div class="listCard"> <span class="text-capitalize user-name"> <i class="icon-user pe-1"></i>videoList </span> <div id="dropDown" class="dropdown float-end"> <button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false"> <i class="icon-dot"></i> </button> <ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu"> <li> <a id="dropdown_items" class="dropdown-item" href="#"><i class="bi bi-mic-mute m-1"></i>Start Audio</a> </li> <li> <a id="dropdown_items" class="dropdown-item" href="#"><i class="bi bi-camera-video-off m-1"></i>Stop Video</a> </li> <li> <a id="dropdown_items" class="dropdown-item" href="#"><i class="bi bi-person-x m-1"></i>Remove</a> </li> </ul> </div> </div> <div id="logo"> <img src="./client_img:png" alt="logo" class="img-fluid rounded float-end" /> </div> </div> </div> </div> <.-- row column --> </div> </div> </div> </div> </body> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle:min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <.-- <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> --> </html> *style.css*

Answer 1

I simply used your code to create the behaviour I understood you wanted: https://codepen.io/Kathara/pen/poLmwmW

The idea is quite simple: First get the element you want to change; for this I added an on('click') event to the video-list elements. If one of those is clicked the magic happens.

Important is to add an unique id to the main video. The videos in the list can all simply have the same class - an id is not necessary for this function.

<video id="main-video" class="videobg" src="[...]" muted></video>

It then saves the clicked video-item ( $thisVideo ) as well as the #main-video ( $mainVideo ) each into a variable. Then we clone the elements ( $thisVideoClone + $mainVideoClone ). Clones are practical if you want to change the element and move it especially if you want to swap the position with another element because you can manipulate and insert it without removing the original element yet. This way I still have the position of the original elements $thisVideo and $mainVideo and can simply add the clones before these with .insertBefore() .

var initVideoSwapping = function() {
    // check if there is an element first
    if ($('.video-list .videoWrap').length > 0 && $('#main-video').length > 0) {
        $('.video-list .videoWrap').on('click', function() {
            var $thisVideo = $(this).find('video');
            var $mainVideo = $('#main-video');
            
            // clone the two elements to change them
            // without modifying the original element
            var $thisVideoClone = $thisVideo.clone();
            var $mainVideoClone = $mainVideo.clone();
            
            // exchange the ids
            $thisVideoClone.attr('id', 'main-video');
            $mainVideoClone.attr('id', '');
            
            // insert the clones before the originals
            // and remove the originals
            $thisVideoClone.insertBefore($mainVideo);
            $mainVideo.remove();
            
            $mainVideoClone.insertBefore($thisVideo);
            $thisVideo.remove();
        });
    }
}


$(function() {
    initVideoSwapping();
});

You could also do this with a whole Item if the logo and a description have to be moved as well. I recommend creating the same video-container for the main video as well as for the videos in the list for that.