Problem jest dosyć trywialny. Wstawienie filmów Youtube na własną stronę nie stanowi żadnych problemów i poradzi sobie z tym, każda nawet mniej techniczna osoba. Kłopot się pojawia, gdy film z YT może być zasłonięty divem, który powinien znaleźć się na warstwie wyżej nagrania.
W domyślnej konfiguracji kodu, który wklejasz na własną stronę www nie da się tego zrobić. Nie ważne czy korzystasz z nowego czy starego kodu osadzania filmów.
Problem może pojawić się np. w sytuacji gdy automatycznie po wejściu na stronę ładuje się popup z zapisem newslettera, który jest częściowo zasłonięty przez klip YT.
Szukając w sieci rozwiązania tego problemu ludzie wymyślali „super” rozwiązania z wykorzystaniem CSS oraz jQuery. Okazało się, że i w tym elemencie Google stanęło na wysokości zadania i przygotowało odpowiedni parametr: ?wmode=transparent, który możesz dodać do adresu URL filmu. Pełny kod powinien wyglądać tak:
<iframe width=”420″ height=”315″ src=”https://www.youtube.com/embed/0WDNqQSgZqY?wmode=transparent” frameborder=”0″ allowfullscreen></iframe>
To wszystko. Banalne rozwiązanie prawda?
Z-index by nie podzialal? Nigdy mi sie nie chcialo sprawdzac 🙂
Z-index nie działa z żadnymi wartościami. Próbowałem kilku różnych kombinacji i zawsze nic to nie dawało. W sumie ten sposób który zaproponowałem w tipsie jest najprzyjaźniejszy. Zero modyfikacji css / dodawania kodów js itp 🙂