Fajna ramka (grafika) do filmu z YT

Miejsce dotyczące zagadnień związanych z standardami WWW - problemy, rozwiązania.
no avatar
bartosz.dolinkiewicz
 
Posty: 2
Reputacja: 0 pkt
Od: 22 paź 2015, o 15:45

Fajna ramka (grafika) do filmu z YT

przez bartosz.dolinkiewicz » 22 paź 2015, o 15:50

Witam,

Wszędzie szukam rozwiązania, jak wstawić film z youtube na stronie, aby wyświetlał się wewnątrz ówcześnie przygotowanej ramki - np. jakiś plik png monitora?
Jestem zainteresowany samą otoczką filmu i oczywiście kodem html, który należałoby wstawić w stronę wordpress'a

no avatar
admin
Administrator
 
Posty: 629
Reputacja: 38 pkt
Od: 30 sty 2013, o 17:39
Lokalizacja: Kraj nad Wisłą

Re: Fajna ramka (grafika) do filmu z YT

przez admin » 22 paź 2015, o 20:23

Możesz to zrobić na kilka sposobów, wykorzystując jedną z poniższych konstrukcji
Kod: Zaznacz cały
<p style="background-image:url('link do zdjęcia');width:...px;height:..px;">
link youtube - shortcode
</p>

lub
Kod: Zaznacz cały
<div id="ramka"><iframe  film youtube</iframe></div>

poniższy kod do pliku css
#ramka{
background-image: url("link-sciezka do zdjęcia-obramowania");
z-index: -1;
}

lub np.
Kod: Zaznacz cały
<iframe  style="border: 3px solid #EEE;background-image:url('link do zdjęcia');" width="560" height="315" src="https://www.youtube.com/embed/dQ0FgUN-Zt4" frameborder="0" allowfullscreen></iframe>

no avatar
bartosz.dolinkiewicz
 
Posty: 2
Reputacja: 0 pkt
Od: 22 paź 2015, o 15:45

Re: Fajna ramka (grafika) do filmu z YT

przez bartosz.dolinkiewicz » 22 paź 2015, o 23:49

Sprawdziłem te kody i efekt jest dziwny lub go nie widać
Zdjęcie zostaje powielone. Jeżeli wstawiam w DIV, to strona przestaje prawidłowo działać.
http://m.wynajem.ezhome.pl/ - testowa

kod, który wykorzystuję:
<iframe style="border: 3px solid #EEE;background-image:url('http://m.wynajem.ezhome.pl/wp-content/uploads/2015/10/monitorxl.png');" width="560" height="315" src="https://www.youtube.com/embed/dQ0FgUN-Zt4" frameborder="0" allowfullscreen></iframe>

Wygląd rzutu strony: http://screencast.com/t/lgNK3cSexb
Wygląd kodu: http://screencast.com/t/TSLuQH3zMW
Korzystam z Genesis motyw: Altitude

Jak tak dalej pójdzie, to chyba zostanę przy "border: 30px", tylko w jakimś ciemniejszym wydaniu :)

no avatar
nastess
 
Posty: 30
Reputacja: 0 pkt
Od: 3 wrz 2015, o 12:31

Re: Fajna ramka (grafika) do filmu z YT

przez nastess » 20 lis 2015, o 12:00

Ewentualnie możesz na etapie montażu filmu nałożyć ramkę na obraz i pasuje.




  • Podobne tematy
    Odpowiedzi
    Wyświetlone
    Ostatni post

Powrót do HTML, CSS, JavaScript

Kto przegląda forum Wordpress

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 2 gości

cron