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, Ł.

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.

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

http://jsfiddle.net/328wy556/

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, Ł.

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

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

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, Ł.