Cześć,
Korzystam z bootstrapa i mam mały problem mianowicie gdy najadę na zdjęcie to zmienia się ono na video i tutaj pojawi się problem ponieważ jest przeskok jakieś 80px miedzy zdjęciem a filmem i tutaj pojawia się pytanie w jaki sposób się tego pozbyć?'
<div class="card video-wrapper" style="background-color: #F5F5F5;">
<video className="card-img-top bg-light mb-3 img-responsive video-responsive" src="{{URL::asset("$film->short")}}" poster="{{URL::asset("$film->thumbnail")}}" loop preload="metadata" ></video>
<div class="film_duration"> <i class="fa fa-clock-o"></i> @php echo gmdate("H:i:s", $film->duration); @endphp
<div class="film_rating"> <i class="far fa-star"></i> {{$film->rating}}
<div class="card-hover" style="text-align: center; " >
<a href="{{ url('/watch', $film->id) }}">
<div style=" max-height: 100px; min-height: 80px; padding-top: 30px; font-size: 13px;" class="text_video_name"> {{$film->name}}
// show poster or video
var figure = $(".video-wrapper").hover( hoverVideo, hideVideo );
function hoverVideo(e) {
$('video', this).get(0).play();
}
function hideVideo(e) {
$('video', this).get(0).load();
}
video {
/* override other styles to make responsive */
width: 100% !important;
object-fit: cover;
}
.video-responsive
{
width:100%;
}
Jeśli ustawię na sztywno wysokość w ".video" np. na 250px trzyma się wszystko sztywno niestety wtedy nie jest to responsywne na różnych wielkościach ekranów natomiast jeśli chce skorzystać z wysokości w % to nie działa może macie jakieś rozwiązanie?