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

Question

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



  
    
    
    
    
    

    Document
  
  
 


      
  
        

      
         
        
          
            
              videoBg
            
            
              
              
                
                  
                    Start Audio
                  
                
                  Stop Video
                
                
                  Remove
                
              
            
          
          
            
          
        
      
   
      
        
          
            
            
              
                
                  videolist1
                
                
                  
                  
                    
                      Start Audio
                    
                    
                      Stop Video
                    
                    
                      Remove
                    
                  
                
              
          
            
          

          
            
            
              
                
                  videolist2
                
                
                  
                  
                    
                 Start Audio
                    
                    
                      Stop Video
                    
                    
                      Remove
                    
                  
                
              
           
            
          

          
            
            
              
                
                  videolist3
                
                
                  
                  
                    
                      Start Audio
                    
                    
                      Stop Video
                    
                    
                      Remove
                    
                  
                
              
           
            
          

          
            
            
              
                
                  videolist4
                
                
                  
                  
                    
                      Start Audio
                    
                      Stop Video
                    
                    
                      Remove

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?

Rodgath · Accepted Answer

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();
});

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

Answers (1)

Related Questions