Hur man bäddar in responsiv YouTube-video på webbplatsen

Senaste uppdateringen okt 17, 2021

Innehåll

Bädda in responsiv YouTube-video med Bootstrap

Att sätta YouTube-videor på webbplatser är vanligt idag. YouTube tillhandahåller en iframe-kod för att bädda in videon på webbplatser. Videon som återges genom denna iframe-kod svarar dock inte. Det betyder att på små enheter som mobil, surfplatta kanske din video inte ser bra ut.

Egentligen måste dina inbäddade YouTube-videor vara lyhörda för en bättre användarupplevelse. I den här artikeln studerar vi hur man bäddar in responsiva YouTube-videor på din webbplats.

Jag hittade 3 möjliga sätt att uppnå vårt slutresultat. Låt oss se det en efter en.

Bädda in responsiv YouTube-video med Bootstrap

Bootstrap är det mest populära frontend-verktyget som hjälper till att utveckla responsiva webbplatser. Det ger också en enkel lösning för att göra din YouTube-video lyhörd.

För att komma igång måste du först inkludera CSS-filen i Bootstrap enligt följande. Om du redan använder Bootstrap i ditt projekt hoppar du över det här steget.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

Använd sedan följande HTML för att bädda in din video med en Bootstrap.

<div class="container">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0"></iframe>
    </div>
</div>

Ersätt platshållaren VIDEO_ID med det faktiska video-id: t. Prova det och du borde se att din video fungerar bra på mindre enheter.

Du kan läsa om den här inbäddningsmetoden i Bootstrap-dokumentationen.

Responsiv YouTube-video med Fancybox

Det här alternativet är lite annorlunda. Här istället för att visa video direkt, visar vi en miniatyr av YouTube-video. Och sedan klicka på en miniatyrbild, kommer din video att spela upp i popup-fönstret. Detta kan göras med en fancybox.

För att kunna använda Fancybox måste du inkludera följande CSS- och JS-filer på din webbplats.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

Efter detta placerar du koden nedan så är du klar.

<a data-fancybox="" href="https://www.youtube.com/watch?v=VIDEO_ID">
    <img src="http://i3.ytimg.com/vi/VIDEO_ID/hqdefault.jpg" />
</a>

Lite YouTube-inbäddningar

I den första metoden har vi använt iframe-kod. När du använder en iframe måste webbläsaren ladda ner nästan 800 kB data för att göra en video.

Med fancybox kan du minska denna belastning. Men igen måste du inkludera deras CSS och JS. Att lägga till dessa filer via CDN rekommenderas för att frigöra serverbelastning.

När jag arbetade med detta ämne kom jag över en artikel som förklarar inbäddning av YouTube-videor på ett annat sätt. Det behöver varken använda en iframe vid sidläsning eller behöver inkludera några filer.

Artikeln innehåller kod som alla enkelt kan lägga till i sin applikation. Följ Lite YouTube-inbäddningsartikeln och lägg till koden enligt förslaget.

Det här är de 3 möjliga sätten att bädda in en responsiv YouTube-video. Beroende på dina krav kan du välja vilken som helst av lösningarna.

relaterade artiklar

Inspelningskälla: artisansweb.net