Drukowana wersja tematu

Napisany przez: Puchatek320 18.09.2021, 14:42:00

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ć?'

[HTML] pobierz, plaintext 
<http://december.com/html/4/element/div.html class="col-sm-4">
    <http://december.com/html/4/element/div.html class=" m-2">
        <http://december.com/html/4/element/div.html 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>
 
 
                <http://december.com/html/4/element/div.html class="film_duration">
                    <http://december.com/html/4/element/i.html class="fa fa-clock-o"></http://december.com/html/4/element/i.html> &nbsp;@php echo gmdate("H:i:s", $film->duration); @endphp
                </http://december.com/html/4/element/div.html>
 
                <http://december.com/html/4/element/div.html class="film_rating">
                    <http://december.com/html/4/element/i.html class="far fa-star"></http://december.com/html/4/element/i.html> &nbsp;{{$film->rating}} 
                </http://december.com/html/4/element/div.html>
 
                <http://december.com/html/4/element/div.html class="card-hover" style="text-align: center; " >
 
                            <http://december.com/html/4/element/a.html href="{{ url('/watch', $film->id) }}">
                        <http://december.com/html/4/element/div.html style=" max-height: 100px; min-height: 80px; padding-top: 30px; font-size: 13px;" class="text_video_name">
                        {{$film->name}}  
                        </http://december.com/html/4/element/div.html> 
                        </http://december.com/html/4/element/a.html> 
                </http://december.com/html/4/element/div.html> 
        </http://december.com/html/4/element/div.html>
    </http://december.com/html/4/element/div.html>
</http://december.com/html/4/element/div.html>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
// 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(); 
}
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
 
video {
  /* override other styles to make responsive */
  width: 100%    !important;
  object-fit: cover;
}
 
.video-responsive 
{ 
    width:100%;
}
 
[PHP] pobierz, plaintext 

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?

Napisany przez: php11 19.09.2021, 07:38:01

Link do strony?