{"id":29612,"date":"2021-06-19T17:54:00","date_gmt":"2021-06-19T14:54:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29612"},"modified":"2021-10-18T03:31:01","modified_gmt":"2021-10-18T00:31:01","slug":"jak-osadzic-responsywne-wideo-z-youtube-w-witrynie","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-osadzic-responsywne-wideo-z-youtube-w-witrynie\/","title":{"rendered":"Jak osadzi\u0107 responsywne wideo z YouTube w witrynie?"},"content":{"rendered":"<p>Umieszczanie film\u00f3w z YouTube na stronach internetowych jest obecnie powszechne. YouTube udost\u0119pnia kod iframe do umieszczenia filmu w witrynach internetowych. Jednak wideo renderowane za pomoc\u0105 tego kodu iframe nie jest responsywne. Oznacza to, \u017ce na ma\u0142ych urz\u0105dzeniach, takich jak telefon kom\u00f3rkowy, tablet, Tw\u00f3j film mo\u017ce nie wygl\u0105da\u0107 \u0142adnie.<\/p>\n<p>W rzeczywisto\u015bci osadzone filmy z YouTube musz\u0105 by\u0107 responsywne, aby zapewni\u0107 lepsze wra\u017cenia u\u017cytkownika. W tym artykule dowiemy si\u0119, jak osadzi\u0107 responsywne filmy z YouTube na swojej stronie internetowej.<\/p>\n<p>Znalaz\u0142em 3 mo\u017cliwe sposoby osi\u0105gni\u0119cia naszego ko\u0144cowego rezultatu. Zobaczmy to jeden po drugim.<\/p>\n<h3>Osad\u017a responsywny film z YouTube za pomoc\u0105 Bootstrap<\/h3>\n<p>Bootstrap to najpopularniejsze narz\u0119dzie frontendowe, kt\u00f3re pomaga w tworzeniu responsywnych stron. Zapewnia r\u00f3wnie\u017c \u0142atwe rozwi\u0105zanie, dzi\u0119ki kt\u00f3remu Tw\u00f3j film w YouTube b\u0119dzie responsywny.<\/p>\n<p>Aby rozpocz\u0105\u0107, musisz najpierw do\u0142\u0105czy\u0107 plik CSS Bootstrap w nast\u0119puj\u0105cy spos\u00f3b. Je\u015bli u\u017cywasz ju\u017c Bootstrapa w swoim projekcie, pomi\u0144 ten krok.<\/p>\n<pre><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\" \/&gt;<\/code><\/pre>\n<p>Nast\u0119pnie u\u017cyj nast\u0119puj\u0105cego kodu HTML, aby osadzi\u0107 wideo za pomoc\u0105 Bootstrapa.<\/p>\n<pre><code>&lt;div class=\"container\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"embed-responsive embed-responsive-16by9\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;iframe src=\"https:\/\/www.youtube.com\/embed\/VIDEO_ID?rel=0\"&gt;&lt;\/iframe&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Zast\u0105p symbol zast\u0119pczy VIDEO_ID rzeczywistym identyfikatorem filmu. Wypr\u00f3buj, a powiniene\u015b zobaczy\u0107, \u017ce Tw\u00f3j film dzia\u0142a dobrze na mniejszych urz\u0105dzeniach.<\/p>\n<p>Mo\u017cesz przeczyta\u0107 o tej metodzie osadzania w <a href=\"https:\/\/getbootstrap.com\/docs\/4.1\/utilities\/embed\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumentacji Bootstrap<\/a>.<\/p>\n<h3>Responsywne wideo YouTube za pomoc\u0105 Fancybox<\/h3>\n<p>Ta opcja jest nieco inna. Tutaj zamiast bezpo\u015brednio wy\u015bwietla\u0107 wideo, wy\u015bwietlamy miniatur\u0119 wideo z YouTube. A nast\u0119pnie klikaj\u0105c miniatur\u0119, Tw\u00f3j film zacznie si\u0119 odtwarza\u0107 w wyskakuj\u0105cym okienku. Mo\u017cna to zrobi\u0107 za pomoc\u0105 <a href=\"https:\/\/fancyapps.com\/fancybox\/3\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">fancybox<\/a>.<\/p>\n<p>Aby korzysta\u0107 z Fancybox, musisz do\u0142\u0105czy\u0107 do swojej witryny nast\u0119puj\u0105ce pliki CSS i JS.<\/p>\n<pre><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/gh\/fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.css\" \/&gt;\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jquery@3.5.1\/dist\/jquery.min.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/gh\/fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>Nast\u0119pnie umie\u015b\u0107 poni\u017cszy kod i gotowe.<\/p>\n<pre><code>&lt;a data-fancybox=\"\" href=\"https:\/\/www.youtube.com\/watch?v=VIDEO_ID\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;img src=\"http:\/\/i3.ytimg.com\/vi\/VIDEO_ID\/hqdefault.jpg\" \/&gt;\n&lt;\/a&gt;<\/code><\/pre>\n<h3>Lite YouTube Embeds<\/h3>\n<p>W pierwszej metodzie u\u017cyli\u015bmy kodu iframe. Podczas korzystania z iframe przegl\u0105darka musi pobra\u0107 prawie 800kB danych, aby wyrenderowa\u0107 wideo.<\/p>\n<p>Korzystaj\u0105c z fancybox mo\u017cesz zmniejszy\u0107 to obci\u0105\u017cenie. Ale znowu musisz do\u0142\u0105czy\u0107 ich CSS i JS. Zaleca si\u0119 dodanie tych plik\u00f3w przez CDN, aby zwolni\u0107 obci\u0105\u017cenie serwera.<\/p>\n<p>Pracuj\u0105c nad tym tematem, natkn\u0105\u0142em si\u0119 na artyku\u0142, kt\u00f3ry wyja\u015bnia osadzanie film\u00f3w z YouTube w inny spos\u00f3b. Nie musi u\u017cywa\u0107 elementu iframe podczas \u0142adowania strony ani do\u0142\u0105cza\u0107 \u017cadnych plik\u00f3w.<\/p>\n<p>Artyku\u0142 zawiera kod, kt\u00f3ry ka\u017cdy mo\u017ce \u0142atwo doda\u0107 do swojej aplikacji. Post\u0119puj zgodnie z artyku\u0142em <a href=\"https:\/\/www.labnol.org\/internet\/light-youtube-embeds\/27941\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Lite YouTube Embeds<\/a> i dodaj kod zgodnie z sugesti\u0105.<\/p>\n<p>Oto 3 mo\u017cliwe sposoby osadzania responsywnego filmu z YouTube. W zale\u017cno\u015bci od Twoich wymaga\u0144 mo\u017cesz wybra\u0107 dowolne rozwi\u0105zanie.<\/p>\n<h4>Powi\u0105zane artyku\u0142y<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/youtube-api-jak-uzyskac-liste-filmow-z-youtube-na-swoim-kanale\/\" title=\"Jak uzyska\u0107 list\u0119 film\u00f3w z YouTube na swoim kanale?\">Jak uzyska\u0107 list\u0119 film\u00f3w z YouTube na swoim kanale?<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/jak-korzystac-z-interfejsu-api-youtube-do-przesylania-filmow-na-kanal-youtube\/\" title=\"Jak korzysta\u0107 z interfejsu API YouTube do przesy\u0142ania film\u00f3w na kana\u0142 YouTube\">Jak korzysta\u0107 z interfejsu API YouTube do przesy\u0142ania film\u00f3w na kana\u0142 YouTube<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/jak-uzyskac-tagi-wideo-youtube-za-pomoca-interfejsu-api-youtube\/\" title=\"Jak uzyska\u0107 tagi wideo YouTube za pomoc\u0105 interfejsu API YouTube\">Jak uzyska\u0107 tagi wideo YouTube za pomoc\u0105 interfejsu API YouTube<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>W tym artykule pokazujemy, jak osadzi\u0107 responsywny film z YouTube na stronie. U\u017cywamy Fancybox, kt\u00f3ry zapewnia spos\u00f3b na responsywne wideo.<\/p>\n","protected":false},"author":1,"featured_media":21607,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[416],"tags":[847],"class_list":["post-29612","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-roznorodny","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/29612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/comments?post=29612"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/29612\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media\/21607"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media?parent=29612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/categories?post=29612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/tags?post=29612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}