how to move the whole main-video-wrap div into video-list-Wrapping div?-CodePudding

Thanks @Kathara Your help is greatly appreciated

I have created the video layout with a picture in picture mode option click the video move to the background works fine, but I need to move the whole video wrap into the main video wrap not only the video, with the card image name, and dropdowns also moved on within the video list and also changing the id attribute of videoWraping element how to modify it?

here is my demo code

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">

    <title>Document</title>
  </head>
  <body>
 
<div   id="videos m-0">

      <div  >
  <div >
        <div  id="VisualMedia">

      <div   id="cardvideo_localstream">
         <video id="video-main"  src="https://www.dropbox.com/s/ve0apo59semvv70/example-video-1.mp4?raw=1 " muted autoplay loop type="video/mp4" ></video>
        <div  id="mainCard">
          <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_remotestream">
            <video  src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 " muted  autoplay loop type="video/mp4" ></video>
            <div  id="imgCard">
              <div>
                <span >
                  <i ></i>videolist1
                </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>
          </div>

          <div  id="cardvideo_remotestream">
            <video   src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 "  muted  ></video>
            <div  id="imgCard">
              <div>
                <span >
                  <i ></i>videolist2
                </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>
          </div>

          <div  id="cardvideo_remotestream">
            <video  src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 "  muted  autoplay loop type="video/mp4"></video>
            <div  id="imgCard">
              <div>
                <span >
                  <i ></i>videolist3
                </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>
          </div>

          <div  id="cardvideo_remotestream">
            <video  src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 " muted  autoplay loop type="video/mp4"></video>
            <div  id="imgCard">
              <div>
                <span >
                  <i ></i>videolist4
                </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>
          </div>
        <!-- </div> -->
      </div>

      <!-- row column -->
    </div>
    </div>
    
  </div>
  </div>
  </body>
  <script src="./bootstrap/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


</html>

style.css

body{
    margin: 0;
    transition: all 0.3s ease;
  }
  /* main video */
  .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: fixed;
    bottom: 2rem;
    right: 1rem;
  }
  .main-video #mainlogo img{
    width: 40px;
  }
  
  #main-video{
    transition: all 0.3s ease-in-out;
  }
  
  
  .videoWrap{
    position: relative;
  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;
  z-index: 2;
  }
  .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;
  }
  }

jsfile

// using jQuery
var initVideoSwapping = function() {
    // check if there is an element first
    if ($('.video-list #imgCard').length > 0 && $('#video-main').length > 0) {
        $('.video-list .videoWrap').on('click', function() {
            var $thisVideoWrapId =  $(this).find('.videoWrap');
            var $mainVideoWrapId= $('.main-video')
        
              $mainVideoWrapId.attr('id', 'cardvideo_remotestream')
                 $thisVideoWrapId.attr('id', 'cardvideo_localstream')
            

// video change

            var $thisVideo = $(this).find('video');
            var $mainVideo = $('#video-main');
            
            // 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', 'video-main');
            $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();
});

main-videoWrap <--> video-list videoWrap, video-list videoWrap<--> main-videoWrap How to append to move and add the video element with a single click using JavaScript or jQuery?

CodePudding user response：

I have looked into the code you have provided and found a few bugs.

Replace:
$('#main-video').length with $('.main-video').length
var $mainVideo = $('#video-main'); with $mainVideo = $('#video-main');

In also restructured your code so that the clicked video is used as main and removed from the DOM. Please use it and test let me know if works as you would want. If not, just comment on this answer and I will see if I can make some improvements.

// using jQuery
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 $thisVideoWrapId =  $(this).find('.videoWrap');
            var $mainVideoWrapId= $('.main-video');

            if ($mainVideoWrapId.attr('id') !== 'cardvideo_remotestream') {
                $mainVideoWrapId.attr('id', 'cardvideo_remotestream');
            } else {
                $mainVideoWrapId.attr('id', 'cardvideo_localstream');
            }

            if ($thisVideoWrapId.attr('id') !== 'cardvideo_localstream') {
                $thisVideoWrapId.attr('id', 'cardvideo_localstream');
            } else {
                $thisVideoWrapId.attr('id', 'cardvideo_remotestream');
            }
            
            var $thisVideo = $(this).find('video');
            var $thisVideoSrc = $thisVideo.attr('src');
            var $mainVideo = $('#video-main');
            var $mainVideoSrc = $mainVideo.attr('src');;
            
            // Replace main video source with clicked video source
            $mainVideo.attr('src', $thisVideoSrc);
            
            // Replace clicked video with main video source
            $thisVideo.attr('src', $mainVideoSrc);

        });
    }
}

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