Witam
potrzebuję pomocy w tworzeniu niekomercyjnej strony [(http://bociany-online.pl/i.php)] która po skończeniu miałaby zastąpić obecną [(http://bociany-online.pl)]
Mam następujące problemy:
Będę bardzo wdzięczny za pomoc i zapraszam do oglądania! :)
Co do menu to czemu nie wrzucisz tego do oddzielnego div'a? Czy Twoja strona ma jakąś określoną szerokość czy ma się "dopasowywać" do ekranu użytkownika?
Korzystasz z tego bootstrapa? Jak na razie to nie widać więc nie wiem po co go ładować :)
chciałbym aby menu było tylko nad wideo po prawej. Strona dopasowuje się do okna i z tego co wiem to właśnie do tego potrzebny był bootstrap?
Właśnie dlatego się zastanawiam po co go ładujesz bo jak na razie to nie widzę abyś korzystał z jego "dobrodziejstw". Po drugie, bootstrap nie jest po to aby strona była na "pełnej szerokości" ekranu tylko po to aby łatwiej można było stworzyć strony responsywne ale Twój szkielet strony (z tego co na szybko sprawdziłem) to poza "podpięciem" bootstrapa nic nie ma z bootstrapem wspólnego :)
Poczytaj o bootstrapie (jak się w nim tworzy strony). Wydaje mi się, że będziesz musiał od podstaw przerobić stronę bo tak na szybko to widzę metodę "kopiuj + wklej" ze starej strony (plus oczywiście Ajax, którego wątek również na tym forum był poruszany :) )
menu zakrywa część obrazu wideo
Menu jest ustawione w kontenerze o klasie video-container2 – semantycznie to by odpowiadało, że menu powinno być jedną częścią (górną) kontenera wideo, a wideo powinno być dolną częścią. Dla mnie to dziwne, bo to menu, które tam jest, powinno dotyczyć całej strony, a nie tylko sekcji wideo. Ale jeśli tak ma być, to najprostszym rozwiązaniem jest dodanie wysokości menu do wartości własności top dla wideo (czyli dla elementu iframe na tej stronie). Menu ma wysokość 21px, a więc tak trzeba ustawić własność top. U mnie działa.
filmy z youtube zajmują w pionie dużo więcej niż sam obraz a chciałbym bezpośrednio pod obrazem umieścić kolejne elementy jak np czat po lewej stronie.
Nie rozumiem, co masz na myśli, pisząc "zajmują w pionie dużo więcej niż sam obraz". Sprecyzuj.
dzięki Silv,
zrobiłem jak sugerowałeś z menu na całą szerokość i nie ma już problemu z zakrywaniem video. A z tą wielkością wideo w pionie to chodzi mi o to że aby filmy były tej wysokości co są teraz to musiałem w css określić height:72%; dla video-container2 i height:24%; video-container ponieważ bez tego wideo zajmowało całego diva w pionie - nie wiem jak to inaczej wytłumaczyć.
I mam z tym problem ponieważ poniżej małej kamery chciałbym umieścić mini czat <script type="text/javascript" src="//www5.yourshoutbox.com/shoutbox/start.php?key=450458352"> a jak go tam wstawiam to jest pod obrazem z kamery.
już powinno działać
A z tą wielkością wideo w pionie to chodzi mi o to że aby filmy były tej wysokości co są teraz to musiałem w css określić height:72%; dla video-container2 i height:24%; video-container ponieważ bez tego wideo zajmowało całego diva w pionie - nie wiem jak to inaczej wytłumaczyć.
Jak zrozumiałem z tego: https://developers.google.com/youtube/player_parameters, to musisz sam określić wysokość i szerokość odtwarzacza. Na tej stronie Google podaje, że należy użyć atrybutów width i height elementu iframe, ale na logikę myślę, że w CSS też będzie dobrze, skoro tak, jak jest, działa tak, jak bym oczekiwał. Z tego wnioskuję, że to, co opisałeś, to działanie oczekiwane; ale radziłbym Ci dokładnie przeczytać dokumentację API YouTube na temat umieszczania odtwarzaczy (ja nigdy tego nie robiłem).
I mam z tym problem ponieważ poniżej małej kamery chciałbym umieścić mini czat <script type="text/javascript" src="//www5.yourshoutbox.com/shoutbox/start.php?key=450458352"> a jak go tam wstawiam to jest pod obrazem z kamery.
Umieść go, wtedy będę mógł coś pokombinować w przeglądarce, żeby wyświetlał się tak, jak trzeba.
Wiem że należy określić szerokość i wysokość iframe. Zależy mi na tym aby strona dopasowywała się do okna i tym samym wielkości wideo i inne elementy np. okno czatu. Teraz wyłączyłem te 72 i 24% w css i efekt sam widzisz.
.video-container {
position:relative;
padding-bottom:56.26%;
padding-top:0;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
/*height:24%;*/
}
.video-container2 {
position:relative;
padding-bottom:56.26%;
padding-top:50px;
height:0;
overflow:hidden;
}
.video-container2 iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
/*height:72%;*/
}
Zależy mi na tym aby strona dopasowywała się do okna i tym samym wielkości wideo i inne elementy np. okno czatu. Teraz wyłączyłem te 72 i 24% w css i efekt sam widzisz.
W takim razie nie rozumiem, o co pytasz. Procenty ustawione w CSS dla elementów HTML powodują, że elementy te dopasowują się do swoich kontenerów. Jeśli każdy z kontenerów-rodziców (czyli rodzic rodzica i tak dalej) aż do samego elementu <html> nie będzie mieć ustawionej na przykład wysokości, to element na samym dole tej hierarchii dopasuje się do <html>, czyli z grubsza do "okna przeglądarki". Teraz tak właśnie jest.
Możesz również pokombinować z jednostkami vw oraz vh zamiast % (viewport width oraz viewport height), które powodują, że element dopasuje się bezpośrednio do tzw. obszaru wyświetlania (viewport). 1vw === 1% szerokości obszaru wyświetlania, 1vh === 1% wysokości obszaru wyświetlania.
UPDATE: Jeśli wyłączysz procenty, w mojej opinii np. odtwarzacz powinien zająć całą dostępną dla niego przestrzeń. Jeśli tak nie chcesz, to musisz dać procenty. Jeśli tak chcesz, to tak będzie. Ewentualnie, żeby być pewnym, ile powierzchni zajmie, możesz "odgórnie" ustawić mu granice poprzez zrobienie layoutu grid (dla mnie – bardzo łatwy w obsłudze).
UPDATE 2: Co do umieszczenia chatu: jeśli zadowoli Cię najprostsze, niezbyt eleganckie moim zdaniem rozwiązanie, to możesz spróbować ustawić position: relative elementowi iframe o ID box1. U mnie wydaje się działać, ale spróbuj odświeżyć dla pewności stronę, raz F5, a potem CTRL+F5.
o co chodzi z tymi kontenerami to z grubsza rozumiem ale i tak nie bardzo wiem jak zrobić aby oba okna wideo zachowywały proporcje 16:9, trzymały zależność wielkości względem siebie i razem dopasowywały się do okna.
Czy mógłbyś z tym czatem podać mi kawałek kodu? Bo też nie bardzo wiem jak z tym dalej zrobić...
Przepraszam za brak odpowiedzi.
Co do umieszczenia chatu, teraz skłaniam się do innego rozwiązania: dla elementu iframe o ID box1 usuń (zakomentuj) deklaracje position oraz height. Znajdują się one u Ciebie w pliku style_nowy.css w selektorze .video-container iframe, .video-container object, .video-container embed. U mnie działa (chat zjeżdża pod wideo). Ale również rekomenduję, byś po zmianie odświeżył stronę, raz F5, a potem CTRL+F5.
Co do drugiego pytania... 3 kwestie:
Myślę, że zachowanie wszystkich tych trzech rzeczy naraz nie jest proste w przypadku, gdy występują między nimi zależności, np. tak jak tutaj położenia oraz rozmiaru. Ja nie mam wystarczającego doświadczenia, by znaleźć rozwiązanie i sugerować Ci jego wybór. Ale na kilka rzeczy mogę zwrócić uwagę:
Ad 1. – proporcje można dla każdego wideo z osobna (lub ich kontenerów) ustawić zgodnie z tymi instrukcjami: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp. Czy u Ciebie da się to prosto ustawić? Nie sądzę; ale na pewno ustawić się da, spróbuj. Najważniejsze (ale nie jedyne ważne) to padding-top: 56.25%;.
Ad 2. – trzymanie proporcji względem siebie jest zależne od jednej rzeczy w sumie: jakie wymiary będzie mieć ustawione jedno i/lub drugie wideo (lub kontener). Zakładając, że chcesz mieć również 16:9 dla obu z nich: jeśli wymiary obu wideo będą dopasowywać się przy zachowaniu tej proporcji do strony (na szerokość, bo na wysokość raczej nie sądzę, by miało dla Ciebie znaczenie), to wtedy proporcje po prostu będą "automatycznie" trzymane. Jeśli nie, to będziesz musiał zrezygnować albo z trzymania proporcji względem siebie, albo z 16:9 któregoś wideo.
Ad 3. – Dopasowanie do okna jest zależne tak samo tylko od wymiarów wideo (lub ich kontenerów).
W idealnym przypadku (jestem, stety lub niestety, perfekcjonistą, dlatego o tym piszę), przy dobrym projekcie strony (a przynajmniej samych kontenerów, czyli najczęściej elementów <div>), wystarczyłoby że ustawisz szerokość LUB współczynnik proporcji JEDNEGO wideo (wszystko jedno, którego), a dopasowanie względem siebie proporcji oraz dopasowanie do okna, a także proporcje drugiego wideo, powinny zostać automatycznie zachowane.
Tak poza technikami CSS: sugerowałbym, żebyś zastanowił się, czy jest sens zmieniać to, co jest teraz (poza położeniem wideo względem chatu). Wydaje mi się, że dobrze to wygląda; proporcje np. małego wideo nie są w mojej opinii złe (250px:150px, co daje różnicę ok. 0,1 w stosunku do proporcji 16:9). Zobacz jeszcze proporcje dużego wideo.
Nie masz za co przepraszać.
Naprawdę pisałeś odpowiedź o 4:39? :)
Zrobiłem jak napisałem z shoutboxem i rzeczywiście pomogło! Ale teraz jest mały problem z czarnymi pasami po bokach wideo. Ale jest też kolejny problem i chyba nie do rozwiązania: shoutbox nie dopasowuje się szerokością przy mniejszym oknie.
Czy masz może gg? Łatwiej i szybciej byłoby się porozumieć. Moje gg to 450854 Sylwek
ps. jak możesz to zerknij na kolejną wersję: [(http://bociany-online.pl/i2.php)]
...bo takie marzenie żeby wideo się nie przeładowywały a jedynie okna youtube przeskalowywały się i zamieniały się miejscami po naciśnieńciu przycisku to chyba nierealne? Nie wiem czy rozumiesz o co by mi chodziło?
Ale teraz jest mały problem z czarnymi pasami po bokach wideo. Ale jest też kolejny problem i chyba nie do rozwiązania: shoutbox nie dopasowuje się szerokością przy mniejszym oknie.
ps. jak możesz to zerknij na kolejną wersję: [(http://bociany-online.pl/i2.php)]
przy zmniejszaniu strony wideo ucieka pod czat...
nałożone wideo jak sam widzisz powinno być w lewym górnym rogu i nie mieć tych czarnych pasów poniżej i powyżej
W tej chwili to w ogóle layout strony postanowił żyć własnym życiem. Nie widzę czarnych pasów. Załączam zrzuty ekranu, jak to u mnie wygląda przy rozdzielczości 1024x600. Chyba zrobiłeś więcej zmian niż tę jedną, o której pisałem. Odwróć wszystkie, zrób tylko tę jedną, potem – ewentualnie – będzie można iść dalej.
Czy masz może gg? Łatwiej i szybciej byłoby się porozumieć.
Przepraszam, odpowiadam wyłącznie na forum. Poza tym, może ktoś z większym doświadczeniem tu zajrzy.
..bo takie marzenie żeby wideo się nie przeładowywały a jedynie okna youtube przeskalowywały się i zamieniały się miejscami po naciśnieńciu przycisku to chyba nierealne? Nie wiem czy rozumiesz o co by mi chodziło?
Nie rozumiem, co masz na myśli, mówiąc "wideo się nie przeładowywały". Chcesz po prostu zamieniać wideo miejscami po naciśnięciu przycisku?
taki efekt z rozjeżdżającym się layoutem to jest na tej drugiej stronie testowej czyli [(http://bociany-online.pl/i2.php)] gdzie próbuję obraz z kamer nałożyć na siebie a zmiany o których pisałeś wprowadziłem na stronie którą do tej pory zmienialiśmy czyli [(http://bociany-online.pl/i.php)] i tam prawie już jest ok poza tymi pasami dla małej kamerki właśnie.
A mówiąc "wideo się nie przeładowywały" to właśnie zależałoby mi na tym aby po prostu wideo zamieniać miejscami po naciśnięciu przycisku. Wydaje mi się że powinno być ok ponieważ jakość nawet w tym małym ściśniętym okienku jest 1080p i wystarczyłoby je przenieść i powiększyć ale nie wiem czy tak się da?
Czat musi mieć stałą szerokość np. 300px tym samym mała kamerka nad nim również stałą 300px. Duża kamera natomiast powinna dopasowywać się do szerokości okna pomniejszonego o 300px. Czy to możliwe?
Dla wielkości okna dla którego 25% szerokości stanowi więcej lub równa się 300px wszystko jest ok. Przy mniejszych oknach i stałej szerokości czatu 300px duża kamera która teraz ma szerokość 75% szerokości okna przestaje się mieścić i ucieka na dół.
Widzę, że ucieka. W moim odczuciu to będzie trwać zbyt długo; Ty się stresujesz, że strona czeka i nikt nie odpowiada, ja się stresuję, że nie wiem, co się dzieje w kodzie.
Radzę Ci – jeśli wiesz, że będziesz jeszcze zajmować się maintanance tej strony, gdy już dopasujesz wielkość wideo – użyć od razu układów flexbox oraz grid. Poczytaj, spróbuj zaimplementować (przede wszystkim usuń floaty), a jeśli coś nie będzie działać, napisz. Chyba, że jednak wolisz nic nie zmieniać w kwestii implementacji layoutu?
Lektury dotyczące grida:
Lektury dotyczące flexboxa:
Dzięki Silv za taką solidną porcję wiedzy :) po szybkim przejrzeniu widzę że będę mógł z tego skorzystać. I bez obaw, ja się nie stresuję, to projekt niekomercyjny i terminy mnie nie gonią... :)