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 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/
CodePudding user response：
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" >
YOUR POPUP CONTENT GOES HERE
<button id="close">Close the popup</button>
</div>
<button id="open">Open the popup</button>CodePudding user response：
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();
CodePudding user response：
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" 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>