how to expand onclick <video>

Question

here's my html code:

echo "<div>";
echo '<video controls><source src="stuff/' . $entry . '"></video>';
echo "</div>";

here's my js code:

<script> 
var videou = $( "video" ).attr("width", "150") + $( "video" ).attr("height", "80"); 
$( "video" ).click(function() 
{
    $(this).attr("width","500");
    $(this).attr("height","500");
    var open = true;
});
</script>

i want to go back to the original attributes. But i already tried everything. Should i use divs?

Answer 1

Your question is hard to understand, but based on your js code, maybe is this what you want

<script> 
var open = false;
$( "video" ).attr("width", "150"); 
$( "video" ).attr("height", "80"); 
$( "video" ).click(function() 
    {
    if(open){
        $(this).attr("width","150");
        $(this).attr("height","80");
        open = false;
    }else{
        $(this).attr("width","500");
        $(this).attr("height","500");
        open = true;
    }
    }
);
</script>

Answer 2

I'm not sure exactly what you are trying to achieve, as your description seems rather vague... If you are wanting a video to be displayed on the click of another element...

echo '<div id="divVideo" style="display: none;">';
echo '<video controls><source src="stuff/' . $entry . '"></video>';
echo '</div>';
echo '<a href="#" id="aVideo">Show Video</a>';

<script>
$(document).ready(function() {
    $('#aVideo').click(function(e) {
        e.preventDefault();
        $('#divVideo').show();
    }
});
</script>

If that is not what you are trying to do, then please more descriptive and I'll try to help the best I can.

Answer 3

Expansion is a transitional event. Do you mean changing the width/height?

Here are expansion methods. As I had mention, check out jQuery's .slideDown() feature. Is this what you were looking for?

Simply replace the code for the .videocontainer with a video frame.

$(document).ready(function(){
  
  $(function(){
    
    var videos = $('.video'),
        state = false;
    
    videos.each(function(){
    
      var videocon = $(this),
          btn = videocon.find('.expandvideo'),
          video = videocon.find('.videocontainer');

      btn.on('click', function() {
        
        if ( state == false ) {
          
          video.slideDown('fast', function() { state = true; btn.html('Close Video'); });
          
        } else {
          
          video.slideUp('fast', function() { state = false; btn.html('Show Video'); });
          
        }
        
      });
      
    });
    
  });
  
});

.videocontainer {
  display: none;
  width: 500px;
  height: 380px;
  background-color:gray;
}

.expandvideo {
  cursor: pointer;
  color: blue;
}

.expandvideo:hover {
  color: red;
}

<div class="video">
  <span class="expandvideo">Show Video</span>
  <div class="videocontainer">
    <!-- Video Code -->
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Also to expand the frame look into jQuery's .animate() function.

$(document).ready(function(){
  
  $(function(){
    
    var videos = $('.video'),
        state = false;
    
    videos.each(function(){
    
      var videocon = $(this),
          btn = videocon.find('.expandvideo'),
          video = videocon.find('.videocontainer');

      btn.on('click', function() {
        
        if ( state == false ) {
          
            video.animate({width: '500px', height: '500px'}, 'fast', function() { state = true; btn.html('Close Video'); });
          
        } else {
          
          video.animate({width: '100px', height: '80px'}, 'fast', function() { state = false; btn.html('Show Video'); });
          
        }
        
      });
      
    });
    
  });
  
});

.videocontainer {
  width: 100px;
  height: 80px;
  background-color:gray;
}

.expandvideo {
  cursor: pointer;
  color: blue;
}

.expandvideo:hover {
  color: red;
}

<div class="video">
  <span class="expandvideo">Show Video</span>
  <div class="videocontainer">
    <!-- Video Code -->
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>