{"id":26389,"date":"2021-06-19T18:11:00","date_gmt":"2021-06-19T15:11:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26389"},"modified":"2021-10-17T18:14:54","modified_gmt":"2021-10-17T15:14:54","slug":"kuidas-reageerivat-youtube-i-videot-veebisaidile-manustada","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/kuidas-reageerivat-youtube-i-videot-veebisaidile-manustada\/","title":{"rendered":"Kuidas reageerivat YouTube&#8217;i videot veebisaidile manustada"},"content":{"rendered":"<p>YouTube&#8217;i videote veebisaitidele lisamine on t\u00e4nap\u00e4eval tavaline. YouTube pakub video veebisaitidele manustamiseks iframe-koodi. Selle iframe-koodi kaudu renderdatud video ei reageeri. See t\u00e4hendab, et v\u00e4ikestes seadmetes, n\u00e4iteks mobiilseadmetes, tahvelarvutites, ei pruugi teie video kena v\u00e4lja n\u00e4ha.<\/p>\n<p>Tegelikult peavad teie manustatud YouTube&#8217;i videod parema kasutuskogemuse saamiseks reageerima. Selles artiklis uurime, kuidas h\u00f5lpsasti reageerivaid YouTube&#8217;i videoid oma veebisaidile kinnistada.<\/p>\n<p>Leidsin 3 v\u00f5imalikku viisi meie l\u00f5pptulemuse saavutamiseks. Vaatame seda \u00fckshaaval.<\/p>\n<h3>Manustage tundlik YouTube&#8217;i video Bootstrapi abil<\/h3>\n<p>Bootstrap on k\u00f5ige populaarsem esiosa t\u00f6\u00f6riist, mis aitab arendada tundlikke saite. See pakub ka lihtsat lahendust, kuidas muuta teie YouTube&#8217;i video tundlikuks.<\/p>\n<p>Alustamiseks peate k\u00f5igepealt lisama Bootstrapi CSS-faili j\u00e4rgmiselt. Kui kasutate oma projektis juba Bootstrapi, j\u00e4tke see samm vahele.<\/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>J\u00e4rgmisena kasutage oma video kinnistamiseks Bootstrapi abil j\u00e4rgmist HTML-i.<\/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>Asendage kohat\u00e4ide VIDEO_ID tegeliku video ID-ga. Proovige ja peaksite n\u00e4gema, et teie video t\u00f6\u00f6tab v\u00e4iksemates seadmetes h\u00e4sti.<\/p>\n<p>Selle kinnistamismeetodi kohta v\u00f5ite lugeda <a href=\"https:\/\/getbootstrap.com\/docs\/4.1\/utilities\/embed\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Bootstrapi dokumentatsioonist<\/a>.<\/p>\n<h3>Tundlik YouTube&#8217;i video, kasutades Fancyboxi<\/h3>\n<p>See valik on natuke erinev. Siin kuvame video otse kuvamise asemel YouTube&#8217;i video pisipildi. Seej\u00e4rel kl\u00f5psates pisipildil, hakatakse teie videot h\u00fcpikaknas esitama. Seda saab teha <a href=\"https:\/\/fancyapps.com\/fancybox\/3\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">fancyboxi abil<\/a>.<\/p>\n<p>Fancyboxi kasutamiseks peate oma veebisaidile lisama j\u00e4rgmised CSS- ja JS-failid.<\/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>P\u00e4rast seda asetage kood allpool ja olete valmis.<\/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&#8217;i manused<\/h3>\n<p>Esimeses meetodis oleme kasutanud iframe-koodi. Iframe&#8217;i kasutamise ajal peab brauser video renderdamiseks alla laadima ligi 800kB andmeid.<\/p>\n<p>Fancyboxi abil saate seda koormust v\u00e4hendada. Kuid j\u00e4llegi peate kaasama nende CSS ja JS. Nende failide lisamine CDN-i kaudu on soovitatav serveri koormuse vabastamiseks.<\/p>\n<p>Selle teema kallal t\u00f6\u00f6tades j\u00f5udsin artiklini, mis selgitab YouTube&#8217;i videote kinnistamist erineval viisil. See ei pea lehe laadimisel kasutama iframe&#8217;i ega sisaldama faile.<\/p>\n<p>Artiklis on kood, mille iga\u00fcks saab h\u00f5lpsalt oma rakendusse lisada. J\u00e4rgige artiklit <a href=\"https:\/\/www.labnol.org\/internet\/light-youtube-embeds\/27941\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Lite YouTube Embeds<\/a> ja <a href=\"https:\/\/www.labnol.org\/internet\/light-youtube-embeds\/27941\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lisage<\/a> soovitatud kood.<\/p>\n<p>Need on 3 v\u00f5imalikku viisi reageeriva YouTube&#8217;i video manustamiseks. S\u00f5ltuvalt teie n\u00f5udmistest saate valida mis tahes lahendused.<\/p>\n<h4>seotud artiklid<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/youtube-api-kuidas-saada-oma-kanali-youtube-i-videote-loendit\/\" title=\"Kuidas saada kanali YouTube&#039;i videote loend\">Kuidas saada kanali YouTube&#8217;i videote loend<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/kuidas-kasutada-youtube-i-api-d-video-uleslaadimiseks-youtube-i-kanalile\/\" title=\"Kuidas kasutada YouTube&#039;i API-d video \u00fcleslaadimiseks YouTube&#039;i kanalile\">Kuidas kasutada YouTube&#8217;i API-d video \u00fcleslaadimiseks YouTube&#8217;i kanalile<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/kuidas-hankida-youtube-i-videomargendeid-youtube-i-api-abil\/\" title=\"Kuidas hankida YouTube&#039;i videom\u00e4rgendeid YouTube&#039;i API abil\">Kuidas hankida YouTube&#8217;i videom\u00e4rgendeid YouTube&#8217;i API abil<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Selles artiklis n\u00e4itame teile, kuidas veebisaidile manustada reageerivat youtube&#8217;i videot. Me kasutame Fancyboxi, mis pakub viisi tundlikuks videoks.<\/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":[420],"tags":[842],"class_list":["post-26389","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mitmesugused-et","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/26389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/comments?post=26389"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/26389\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media\/21607"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media?parent=26389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/categories?post=26389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/tags?post=26389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}