Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript][CSS] Problem z div przy <video>
Puchatek320
post 18.09.2021, 14:42:00
Post #1





Grupa: Zarejestrowani
Postów: 68
Pomógł: 0
Dołączył: 4.11.2019

Ostrzeżenie: (0%)
-----


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


  1. <div class="col-sm-4">
  2. <div class=" m-2">
  3. <div class="card video-wrapper" style="background-color: #F5F5F5;">
  4.  
  5. <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>
  6.  
  7.  
  8. <div class="film_duration">
  9. <i class="fa fa-clock-o"></i> &nbsp;@php echo gmdate("H:i:s", $film->duration); @endphp
  10. </div>
  11.  
  12. <div class="film_rating">
  13. <i class="far fa-star"></i> &nbsp;{{$film->rating}}
  14. </div>
  15.  
  16. <div class="card-hover" style="text-align: center; " >
  17.  
  18. <a href="{{ url('/watch', $film->id) }}">
  19. <div style=" max-height: 100px; min-height: 80px; padding-top: 30px; font-size: 13px;" class="text_video_name">
  20. {{$film->name}}
  21. </div>
  22. </a>
  23. </div>
  24. </div>
  25. </div>
  26. </div>


  1. // show poster or video
  2. var figure = $(".video-wrapper").hover( hoverVideo, hideVideo );
  3. function hoverVideo(e) {
  4. $('video', this).get(0).play();
  5. }
  6. function hideVideo(e) {
  7. $('video', this).get(0).load();
  8. }


  1.  
  2. video {
  3. /* override other styles to make responsive */
  4. width: 100% !important;
  5. object-fit: cover;
  6. }
  7.  
  8. .video-responsive
  9. {
  10. width:100%;
  11. }
  12.  


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?
Go to the top of the page
+Quote Post
php11
post 19.09.2021, 07:38:01
Post #2





Grupa: Zarejestrowani
Postów: 211
Pomógł: 5
Dołączył: 11.02.2011

Ostrzeżenie: (0%)
-----


Link do strony?
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 24.04.2024 - 11:38