Osadzanie filmów z YouTube to świetny sposób na wzbogacenie treści na stronie internetowej. W tym artykule skoncentrujemy się na personalizacji osadzonych filmów przy użyciu tagu HTML Iframe i dostosowaniu stylu, umożliwiając dodanie efektów takich jak zaokrąglona ramka, tło i inne.
Jak Dodać Film z Youtube
Odwiedź platformę i znajdź interesujący Cię film. Poniżej filmu, wybierz opcję “Udostępnij” i następnie kliknij “Umieść”
![Jak Dodać Film z Youtube](https://stronaw.pl/wp-content/uploads/2024/03/Osadzenie-Filmu-z-Youtube.png)
Na następnym ekranie ukaże się kod HTML z tagiem iframe. Skopiuj go i wklej na swojej stronie, aby osadzić wybrany film wśród treści Twojej witryny. Prosty krok, wielki efekt!
![](https://stronaw.pl/wp-content/uploads/2024/03/Screenshot-2024-03-12-at-17-27-14-StronaW-przyklad.png)
Poniżej prezentuję rezultat wklejenia kodu bez żadnych zmian.
<iframe width="560" height="315" src="https://www.youtube.com/embed/xNuR173dwes?si=EfBw8934Uz8r81b8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Personalizacja Kodu Iframe
Otrzymywany z platformy YouTube kod możemy swobodnie dostosować do naszych indywidualnych potrzeb.
Za pomocą atrybutów takich jak szerokość, wysokość, czy opcje “allow” i “style”, możesz nadać filmowi indywidualny charakter. Dzięki temu zyskujesz nie tylko funkcjonalny odtwarzacz, ale także estetyczne wkomponowanie go w kontekst strony.
<iframe src="https://www.youtube.com/embed/xNuR173dwes?si=EfBw8934Uz8r81b8" width="600" height="400" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen title="YouTube video player" style="all: revert-layer; display: block; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background-color: #f0f0f0; padding: 15px;max-width: 600px; margin: auto;"> </iframe>
Rezultat
Atrybuty HTML
Aby dostosować pole iframe do własnych potrzeb, zgłębimy tajniki użytych atrybutów.
- style – Ten atrybut umożliwia dodanie niestandardowych stylów CSS do tagu iframe. W tym przypadku określono zaokrąglenie ramek, cień, kolor tła i wewnętrzny odstęp.
- border-radius – Odpowiada za zaokrąglenie ramek.
- box-shadow – Dodaje cień wokół ramki.
- background-color – Ustala kolor tła wewnątrz ramki.
- padding – Określa wewnętrzny odstęp wewnątrz ramki.
- title – Określa tekst, który zostanie wyświetlony, gdy wskaźnik myszy najedzie na odtwarzacz wideo.
- src: Adres źródłowy, w tym przypadku, to link do osadzanego filmu z YouTube.
- width i height: Określają szerokość i wysokość pola iframe.
- frameborder=”0″: Eliminuje ramkę wokół pola iframe.
- allow – Definiuje, które funkcje są zezwolone w osadzonym elemencie (np. dla odtwarzacza wideo).
- allowfullscreen: Pozwala na pełnoekranowy tryb odtwarzania.
- title: Tekst wyświetlany, gdy wskaźnik myszy najedzie na odtwarzacz wideo.
- style=”all: revert-layer; display: block; text-align: center; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background-color: #f0f0f0; padding: 15px; max-width: 600px; margin: auto;”:
- all: revert-layer: Stylizacja specyficzna dla danego przypadku, ewentualnie zależna od innych czynników w projekcie.
- display: block: Ustawia element jako blokowy.
- border-radius: 10px: Dodaje zaokrąglenie rogów.
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1): Dodaje cień.
- background-color: #f0f0f0: Określa kolor tła.
- padding: 15px: Dodaje wewnętrzny odstęp.
- max-width: 600px: Ustala maksymalną szerokość do 600 pikseli.
- margin: auto: Automatycznie wyśrodkowuje element na stronie.
Stworzenie Stylu CSS
Aby nadać odpowiednie właściwości wyglądowi pola iframe, można skorzystać z dedykowanych reguł CSS. W poniższym przykładzie stworzono klasę video-stronaw, która definiuje pewne elementy stylizacyjne.
<style> .video-stronaw { border-radius: 10px; /* Zaokrąglenie ramek */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Cień */ background-color: #f0f0f0; /* Tło */ padding: 15px; /* Wewnętrzny odstęp */ width: 600px; /* Szerokość */ height: 400px; /* Wysokość */ margin: 0 auto; /* Wyśrodkowanie */ } </style>
Stworzenie dedykowanej klasy to wygodny sposób na oszczędność czasu przy dodawaniu filmów. Dzięki wcześniej zdefiniowanym stylom w klasie, nie musimy ponownie określać każdej właściwości przy każdym osadzaniu filmu. Wystarczy jednorazowe zdefiniowanie i przypisanie klasy, co pozwala szybko i sprawnie dostosować wygląd osadzonych treści, skupiając się jedynie na treści filmu, a nie na detalach stylizacyjnych.
W kontekście osadzania filmu i wykorzystywania wcześniej zdefiniowanej klasy video-stronaw, kod prezentuje się tak:
<div class="video-stronaw"> <iframe src="https://www.youtube.com/embed/TwojaWideoID"></iframe> </div>
Dzięki wykorzystaniu HTML i stylów CSS możemy łatwo dostosować wygląd osadzonych filmów z YouTube. Eksperymentuj z różnymi stylami, aby stworzyć unikalne i atrakcyjne treści wideo na swojej stronie internetowej.