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

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  
<div  id="videos m-0">

  <div >
    <div >
      <div id="VisualMedia">
        <div >
          <video  src="https://www.dropbox.com/s/ve0apo59semvv70/example-video-1.mp4?raw=1" muted></video>
          <div >
            <div >
              <span >
                      <i ></i>videoBG
                    </span>
              <div id="dropDown" >
                <button  type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
                        <i ></i>
                      </button>
                <ul id="drop"  aria-labelledby="userMenu">
                  <li>
                    <a id="dropdown_items"  href="#">
                      <i ></i>Start Audio</a>
                  </li>
                  <li>
                    <a id="dropdown_items"  href="#"><i
                              ></i>Stop Video</a>
                  </li>
                  <li>
                    <a id="dropdown_items"  href="#"><i ></i>Remove</a>
                  </li>
                </ul>
              </div>
            </div>

            <div id="mainlogo">
              <img src="./client_img.png" alt="logo"  />
            </div>
          </div>
        </div>
        <!-- <div > -->
        <div >
          <div   id="cardvideo_">
            <video  src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 " muted></video>
            <div >
              <div >
                <span >
                        <i ></i>videoList
                      </span>
                <div id="dropDown" >
                  <button  type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
                          <i ></i>
                        </button>
                  <ul id="drop"  aria-labelledby="userMenu">
                    <li>
                      <a id="dropdown_items"  href="#"><i ></i>Start
                              Audio</a>
                    </li>
                    <li>
                      <a id="dropdown_items"  href="#"><i
                                ></i>Stop Video</a>
                    </li>
                    <li>
                      <a id="dropdown_items"  href="#"><i
                                ></i>Remove</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div id="logo">
                <img src="./client_img.png" alt="logo"  />
              </div>
            </div>
          </div>
        </div>


        <!-- row column -->
      </div>
    </div>

  </div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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*

CodePudding user response：

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