How do I display this div using jquery when a button is clicked

Admin 1
Viewed 69

I have a video on my website that autoplays on website load. I want add a button to the page so that when the button is clciked, the div containing the video will popup.

Here is the code ;

<div class="video-con" id="myvideo">
                    <video muted="" loop="" playsinline="">
                        <source src="https://example.com/wp-content/uploads/2021/06/VERB_Showreel_V06-1-1-1.mp4" type="video/mp4">
                    </video>
                </div>

How do I make this video play as a popup when a button is click

Edit: I am looking to recreate video hero on https://verbbrands.com/

video jquery javascript
3 Answers

You can try to mark it as display: none and edit that.

$(function() {

const $popup = $("#popup");

$("#open").on("click", function(event) {
  $popup.removeClass("hidden");
});

$("#close").on("click", function(event) {
  $popup.addClass("hidden");
});

});
.hidden {
  display: none;
}
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

<div id="popup" class="hidden">
  YOUR POPUP CONTENT GOES HERE
  <button id="close">Close the popup</button>
</div>
<button id="open">Open the popup</button>

user_148843380

You can do it in several ways:

Youtube or Vimeo

document.getElementById('clickme')
    addEventListener("click", function () {
        var iframe = document.getElementById("myiframe");
            src = "https://www.youtube.com/watch?v=k4pTeHclChA";
        //$iframe.prop('src', '').prop('src', src + '?autoplay=1');
        iframe.src = '';
        iframe.src = `${src}?autoplay=1`;
    });

We just change the source and append ?autoplay=1 to it.

HTML5

document.getElementById('myvideo').play();
user_4365600

I think this is what you are after. The CSS may need tweaking for your site but the base functionality is there. in this configuration the video is always a pop up which is the same as the video on https://verbbrands.com/

$(function() {
  const maxWidth = 360; //the width the video will be unmuted
  const minWidth = 200; //the width the video will be when muted
  
  //set the video to the small width
  $('#my-video').prop('width', minWidth);
  
  $("#my-video").on("click", function(event) {
   
    event.preventDefault(); //prevent video from being pasued when clicked on
   
    if($('#my-video').prop('width') == maxWidth){ //if the video is already at max width
         $('#my-video').prop('muted', 1); //mute the video
        $('#my-video').prop('width', minWidth); //set to smaller width
      
      //change the classes
      $('#my-video').removeClass("PanelFloatCenter");
      $('#my-video').addClass("PanelFloat");
    }else{ // the vidoe is in small state
    
      $('#my-video').prop('width', maxWidth);  // make video large
      $('#my-video').prop('muted', 0); //unmute the video
      //change the classes
      $('#my-video').removeClass("PanelFloat");
      $('#my-video').addClass("PanelFloatCenter");
    }
    
  });


});
.PanelFloat {
        position: fixed;
        overflow: hidden;
        z-index: 2400;
      
        right: 30px;
        top: 20%;
       
    }
    
.PanelFloatCenter{
    position: fixed;
    overflow: hidden;
    z-index: 2400;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}
<!DOCTYPE html> 
<html> 
<body> 


 <video id="my-video" class="PanelFloat" autoplay loop muted >
  <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
  
  Your browser does not support HTML video.
</video>

<!-- Example content text -->

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>


<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body> 
</html>

user_32643620
Related