[CSS][HTML][bootstrap 3] Iframe z filmem Opcje

[lukash82]

Witam,

Chciałbym zamieścić film z YT za pomocą standardowego kodu umieszczania filmów wg bootstrap. Standardowo kod ten wygląda tak:

[HTML] pobierz, plaintext 
<div class='embed-responsive embed-responsive-16by9'><iframe frameborder='0' class='embed-responsive-item' src='LINK do FILMU'></iframe></div>
[HTML] pobierz, plaintext 

Filozofii w tym nie ma żadnej... Ale filmik jest taki maciupki, że ledwo co tam widać. Standardowo YT w generowanym linku dodaje na sztywno do iframe 2 parametry, width i height. Jednak jeśli okienko z filmem ma być responsywne to takie rozwiązanie odpada. Klasy z tego kodu w bootstrap css wyglądają tak:

[CSS] pobierz, plaintext 
.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
  padding-bottom: 75%;
}
[CSS] pobierz, plaintext 

Jednak nie wiem czemu okienko z filmem nie rozciąga się do 100%. Próbowałem kilku rozwiązań w CSS ale niestety nic nie udało mi się zrobić. Jeśli ktoś z Was może mi coś doradzić to byłbym dźwięczny, pozdrawiam, Ł.

Ten post edytował lukash82 22.06.2015, 11:40:13

[Daimos]

z tego co widzę, to faktycznie bootstrap sobie nie radzi z youtube. Najłatwiej dać bezpośrednio na iframe klasę kolumny, np. col-md-12, ewentualnie sam ustal szerokość 100% i po problemie.

[Pyton_000]

Ja używałem czegoś takiego żeby mi się wyświetlał. Nie jest to BS ale działa:

http://jsfiddle.net/328wy556/

[lukash82]

Witam,

col-md-12 niestety nie działa. Ale dodałem w css:

[CSS] pobierz, plaintext 
.embed-responsive iframe{
	border					: 0;
	width						: 100%;
	min-height					: 350px;
	height					: auto; !important}
[CSS] pobierz, plaintext 

Szerokość jest na 100%, wysokość na sztywno 350px co mi się średnio podoba. Szczególnie przy mniejszych ekranach. Ale dodałem modyfikacje w @media i jako tako wygląda. Może jak zwykle przez przypadek wpadnę gdzieś na jakieś lepsze rozwiązanie. Póki co musi być tak. Dzięki za zainteresowanie, pozdrawiam, Ł.

[Pyton_000]

Mam wrażenie że ostatnio moje posty są transparentne.

[Daimos]

zrobiłem Ci działającego fiddla, embed-responsive działa dobrze od wersji 3.2:
http://jsfiddle.net/asg9wpr0/

[lukash82]

Witam,

Daimos, Twoje rozwiązanie jest jak najbardziej poprawne. I praktycznie identyczne z moim, bo wielkiej filozofii w tym nie ma. Mam na innej stronie wykorzystane identyczne rozwiązanie gdzie film rozciąga się na 100% bez problemu. I zachodziłem w głowę, dlaczego tam działa, a tu nie. Mimo, że kod jest identyczny...

Zwróciłeś jednak uwagę, że embed-responsive działa poprawnie od BS 3.2. A tak się składa, że na tej jednej jedynej stronie byłem zmuszony wrócić do wersji BS 3.1. I tu jest właśnie pies pogrzebany... Człowiek szuka rozwiązania wszędzie na około, a jak zawsze okazuje się, że jest zupełnie w innym miejscu...

Dzięki za naprowadzenie na błąd

Pyton_000. Twoje rozwiązanie, mimo że spoza BS, było niemal identyczne z rozwiązaniem jakie miałem. Ale jak widać, błąd tkwił w zupełnie innym miejscu. Dzięki jednak też za poświęcony czas.

Pozdrawiam, Ł.