John Davidson

javascript - how to resize video on click

0 comments
Message:


there was a task of such a plan, the site has a video from YouTube, which is included in a small window, how to make it so that when you click on it, it opens 3/4 of the screen, and, accordingly, when it stops, it returns to its original value
example with video block




<div class="flower_petal_video_video">
<iframe width="100%" height="100%" src="https://www.youtube.com/xxx/xxx" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>


My Answer:
You can achieve this by using JavaScript to toggle a CSS class that changes the size of the video element. Here's an example code snippet:

HTML:
html





CSS:
css
.video-container {
width: 320px;
height: 180px;
transition: width 0.5s, height 0.5s;
}

.video-container.fullscreen {
width: 75vw;
height: 75vh;
}


JavaScript:
javascript
const videoContainer = document.querySelector('.video-container');

videoContainer.addEventListener('click', function() {
videoContainer.classList.toggle('fullscreen');
});


In this code snippet, we have a video container with an embedded YouTube video. When the container is clicked, the `fullscreen` class is toggled on and off, which changes the width and height of the video container to make it 75% of the viewport width and height. Clicking on the video again will return it to its original size.

Rate this post

3 of 5 based on 4524 votes

Comments




© 2024 Hayatsk.info - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us