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="col-sm-4"> <div class=" m-2"> <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"> </div> <div class="film_rating"> </div> <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}} </div> </a> </div> </div> </div> </div>
// 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?