Video z YT zamieszczone w artykule nie jest responsywne. Poszukuje sposobu.

[Grzegorz_n]

Witam Szanownych Forumowiczów :)

Bardzo proszę o pomoc :)


Za pomocą JCE zamieściłem w artykule (w iframe) video z YT. Niestety, ale obraz nie jest responsywny.
Na PC to jeszcze pół biedy, jednak na smartfonie nie do przyjęcia.

Szukam jakiegoś sposobu na rozwiązanie tego problem i pomyślałem, że może któryś z Szanownych Kolegów, mógłby podrzucić jakiś sprawdzony pomysł?


Z góry dziękuję i pozdrawiam :)

[siristru]

Dodaj do css:


.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin: 0 0 20px 0;
}
.video-container iframe,
.video-container video,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Potem w artykule przechodzisz w tryb html i osadzasz wideo tak:


<div class="video-container">
tutaj wklejasz iframe z YT
</div>

[Grzegorz_n]

Witaj siristru :)

Wielkie dzięki za pomoc i poświęcony czas :)

Mam jednak jakiś problem.
Wkleiłem Twój kod w template.css - na samym końcu.
Następnie w artykule - w którym jest osadzony film z YT, użyłem kodu (div) w trybie html.
Nadal jest to samo.
Wiem, robię coś źle, jednak nie wiem co i gdzie, niestety.

Możesz???
Dzięki :)

[siristru]

Podaj URL bym mógł zobaczyć co zrobiłeś.

Tutaj zrobiłem u siebie: http://siristru.prolusatia.pl/

[Grzegorz_n]

Podaj URL bym mógł zobaczyć co zrobiłeś.



<div class="video-container">
(http://helix3.ded.pl/blog/how-marching-for-science-risks-politicizing-it) <iframe class="mce-item-media mce-item-iframe" src="https://www.youtube.com/embed/Gm3bQVANtVo?autoplay=1&amp;rel=1" width="560" height="450" frameborder="0" allowfullscreen="true"></iframe>

</div>
(http://helix3.ded.pl/blog/how-marching-for-science-risks-politicizing-it)


http://helix3.ded.pl/blog/how-marching-for-science-risks-politicizing-it

[Grzegorz_n]

Korzystając z okazji zapytam jeszcze o jedną rzecz.
Domyślam się, że Joomla nie posiada takiej funkcjonalności, pozwalającej na umieszczenie tego samego menu na dwóch różnych pozycjach?
Ja poszukuje takiego rozwiązania które pozwoli mi tworząc jedno menu - np. górne menu, aktualizować jednocześnie o te same wartości boczne menu. Jednym słowem to samo menu w dwóch różnych miejscach.

[grzesiek_w]

Jeśli masz taką potrzebę to możesz umieścić to samo menu w wielu pozycjach szablonu. Po prostu tworzysz moduły "menu" i umieszczasz w wybranych pozycjach szablonu - możesz je nawet przypisać do wybranych pozycji menu - nie musi się wszędzie wyświetlać. Następnie w tym module wybierasz które menu ma się w nim wyświetlać.

Jeśli chcesz żeby każde z tych menu inaczej wyglądało możesz zastosować inny moduł menu. Ale nawet jeśli zastosujesz wszędzie ten sam moduł za pomocą styli CSS przypisanych do pozycji modułu możesz dla nich stworzyć indywidualne style.
Właściwie to nawet jeśli wszystkie te moduły będą w tej samej pozycji możesz stworzyć dla nich inne style - tyle że będziesz musiał je dodać w module.

[siristru]

Dodałeś div z klasą... ale nie ma klasy w CSS: http://prntscr.com/s653y3

[Grzegorz_n]

Dodałeś div z klasą... ale nie ma klasy w CSS: http://prntscr.com/s653y3Sorry, ale nadal nie wiem o co chodzi. Po prostu nie rozumiem w czym rzecz, czyli w którym miejscu popełniłem błąd.

[Grzegorz_n]

możesz umieścić to samo menu w wielu pozycjach szablonuBardzo dziękuję za pomoc :)

[siristru]

Sorry, ale nadal nie wiem o co chodzi. Po prostu nie rozumiem w czym rzecz, czyli w którym miejscu popełniłem błąd.

Już wyjaśniam, musisz wykonać dwie czynności:

1. Utworzyć kontener div z klasą video-container a do niego wstawić iframe z YouTube.

2. Dodać kod CSS który opisuje klasę video-container do swoich plików CSS. Może to być:

ROOT/templates/shaper_helixultimate/css/template.css

lub lepiej ROOT/templates/shaper_helixultimate/css/custom.css o ile ten szablon obsługuje taki plik (klubowe szablony, kiedy są aktualizowane nadpisują swoje pliki i jeśli wprowadzasz w nich zmiany to je tracisz, dlatego niektóre z nich pozwalają na utworzenie i automatyczne załadowanie pliku custom.css gdzie masz własne style).

Tutaj widać o co chodzi: http://prntscr.com/s66c53

[Grzegorz_n]

Działa:)
Już wyjaśniam w czym tkwił problem.


Już wyjaśniam, musisz wykonać dwie czynności:Tak zrobiłem od razu wczoraj za pierwszym razem - dodałem do template.css. Dałem jednak znać, że nie działa. W ostatniej wiadomości od Ciebie utwierdziłem się w przekonaniu, że wczoraj zrobiłem dobrze, jednak pewnie w niewłaściwym pliku CSS.
Postanowiłem więc, że kod CSS będę dodawał po kolei do wszystkich CSS-ów dla tego szablonu, gdyż wiadomo, że template.css odpada, a pliku custom.css nie mam. W ten oto sposób trafiłem na właściwy plik i w tym szablonie nazywa się on font-awesome.min.css.

Drogi siristru, bardzo dziękuję za pomoc i poświęcony czas :):):)

Pozdrawiam serdecznie :)