John Davidson

<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.