Hej forumowicze
piszę do Was z prośbą o pomoc. Nie za bardzo wiem jak sprawić, aby osadzone filmiki na mojej stronie dopasowywały się do wielkości wyświetlacza. Jak to się dzieje do tej pory, możecie zobaczyć na przykładowej stronie: http://janusz-soft.pl/filmik/poprosili-mnie-bym-zrobil-api/1003.
Krótko mówiąc - nie wygląda to zbyt ciekawie! Macie jakieś propozycje jak rozwiązać ten problem?
Width iframe jest na sztywno, musisz go zmieniać albo ustawić np. jako 50vw
EDIT: może lepiej jako max-width, no ale wiesz o co chodzi
Sprawdź sobie jak to jest zrobione w Bootstrapie: http://getbootstrap.com/components/#responsive-embed
Rozwiązanie od Bootstrapa na jsfiddle działa, ale w projekcie mam problem:
<div class="object-yt embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/{{ videoId }}" frameborder="0" allowfullscreen></iframe>
</div>
.object-yt {
width: 560px;
height: 315px;
margin: 5px 0 10px 0;
border: 1px solid #fff;
}
Jeśli odejmę klasę object-yt, w miejscu wideo jest puste pole, a z object-yt, wideo wygląda tak:
Nie wiadomo skąd ta wysokość nagle się zmieniła.