Hi everyone. I have a question in regard of a container that is shrinking when zooming.
I dont know what to do since I am using video on the container and not an image.
This head is copied from a third party snipped is working fine but I dont know what is the best approach to solve it.
Here is the link for the application:
https://tour-application.herokuapp.com/
<header>
<div class="overlay">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="{% static 'videos/yoga.mp4' %}" type="video/mp4">
</video>
<div class="container3 h-100">
<div data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="1800" class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white for-wide-screen">
<h2 class="display-4 font-weight-normal">The best wellness retreats.</h2>
<!-- row -->
<div class="row d-flex justify-content-center">
<div class="col-md-6">
<!-- Search form -->
<form action="{% url 'search' %}" method="GET" class="header__search">
<div class="input-group search-input">
<!-- Change the search input phrase here -->
<input type="text" name="q" placeholder="Search" class="form-control">
<div class="input-group-append">
<button class="btn btn-warning" type="submit" name="button"><i class="fas fa-search"></i></button></div>
</div>
</form>
<!--/ Search form -->
</div>
</div>
<!-- row -->
</div>
</div>
</div>
</div>
</header>
css
header {
position: relative;
white-space: nowrap;
height: 100vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 65%;
left: 65%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container3 {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
}