{"id":26023,"date":"2021-06-19T17:53:00","date_gmt":"2021-06-19T14:53:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26023"},"modified":"2021-10-17T20:14:55","modified_gmt":"2021-10-17T17:14:55","slug":"reagoivan-youtube-videon-upottaminen-verkkosivustoon","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/reagoivan-youtube-videon-upottaminen-verkkosivustoon\/","title":{"rendered":"Reagoivan YouTube-videon upottaminen verkkosivustoon"},"content":{"rendered":"<p>YouTube-videoiden sijoittaminen verkkosivustoille on nyky\u00e4\u00e4n yleist\u00e4. YouTube tarjoaa iframe-koodin videon upottamiseksi verkkosivustoille. T\u00e4m\u00e4n iframe-koodin kautta renderoitu video ei kuitenkaan reagoi. Se tarkoittaa, ett\u00e4 pieniss\u00e4 laitteissa, kuten mobiililaitteissa, tablet-laitteissa, video ei ehk\u00e4 n\u00e4yt\u00e4 hyv\u00e4lt\u00e4.<\/p>\n<p>Itse asiassa upotettujen YouTube-videoidesi on oltava reagoivia parempaan k\u00e4ytt\u00f6kokemukseen. T\u00e4ss\u00e4 artikkelissa tutkitaan, miten responsiiviset YouTube-videot upotetaan verkkosivustoosi.<\/p>\n<p>L\u00f6ysin 3 mahdollista tapaa saavuttaa lopputuloksemme. Katsotaanpa se yksi kerrallaan.<\/p>\n<h3>Upota reagoiva YouTube-video Bootstrapilla<\/h3>\n<p>Bootstrap on suosituin k\u00e4ytt\u00f6liittym\u00e4, joka auttaa kehitt\u00e4m\u00e4\u00e4n reagoivia sivustoja. Se tarjoaa my\u00f6s helpon ratkaisun tehd\u00e4 YouTube-videostasi reagoiva.<\/p>\n<p>Aloittamiseksi sinun on ensin sis\u00e4llytett\u00e4v\u00e4 Bootstrapin CSS-tiedosto seuraavasti. Jos k\u00e4yt\u00e4t jo Bootstrapia projektissasi, ohita t\u00e4m\u00e4 vaihe.<\/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>Seuraavaksi k\u00e4yt\u00e4 seuraavaa HTML-koodia videosi upottamiseen Bootstrapilla.<\/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>Korvaa paikkamerkki VIDEO_ID todellisella videotunnuksella. Kokeile ja sinun pit\u00e4isi n\u00e4hd\u00e4 videosi toimivan hyvin pienemmiss\u00e4 laitteissa.<\/p>\n<p>Voit lukea t\u00e4st\u00e4 upotustavasta <a href=\"https:\/\/getbootstrap.com\/docs\/4.1\/utilities\/embed\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Bootstrap-dokumentaatiosta<\/a>.<\/p>\n<h3>Reagoiva YouTube-video Fancyboxin avulla<\/h3>\n<p>T\u00e4m\u00e4 vaihtoehto on hieman erilainen. T\u00e4ss\u00e4 sen sijaan, ett\u00e4 n\u00e4yt\u00e4mme videota suoraan, n\u00e4yt\u00e4mme pikkukuvan YouTube-videosta. Ja sitten napsauttamalla pikkukuvaa, videosi alkaa toistaa ponnahdusikkunassa. T\u00e4m\u00e4 voidaan tehd\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 <a href=\"https:\/\/fancyapps.com\/fancybox\/3\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">fancyboxia<\/a>.<\/p>\n<p>Fancyboxin k\u00e4ytt\u00e4miseksi sinun on lis\u00e4tt\u00e4v\u00e4 verkkosivustollesi seuraavat CSS- ja JS-tiedostot.<\/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>T\u00e4m\u00e4n j\u00e4lkeen, aseta koodi alla ja olet 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 Embeds<\/h3>\n<p>Ensimm\u00e4isess\u00e4 menetelm\u00e4ss\u00e4 olemme k\u00e4ytt\u00e4neet iframe-koodia. Kun iframe-kehys on k\u00e4yt\u00f6ss\u00e4, selaimen on ladattava l\u00e4hes 800 kt dataa videon renderoimiseksi.<\/p>\n<p>Fancyboxin avulla voit v\u00e4hent\u00e4\u00e4 t\u00e4t\u00e4 kuormaa. Mutta j\u00e4lleen sinun on sis\u00e4llytett\u00e4v\u00e4 heid\u00e4n CSS ja JS. N\u00e4iden tiedostojen lis\u00e4\u00e4minen CDN: n kautta on suositeltavaa palvelimen kuormituksen vapauttamiseksi.<\/p>\n<p>Ty\u00f6skennelless\u00e4ni t\u00e4m\u00e4n aiheen kanssa t\u00f6rm\u00e4sin artikkeliin, jossa selitet\u00e4\u00e4n YouTube-videoiden upottaminen eri tavalla. Sen ei tarvitse k\u00e4ytt\u00e4\u00e4 iframe-kehyst\u00e4 sivulatauksessa, eik\u00e4 sen tarvitse sis\u00e4lt\u00e4\u00e4 tiedostoja.<\/p>\n<p>Artikkelissa on koodi, jonka kuka tahansa voi helposti lis\u00e4t\u00e4 sovellukseensa. Seuraa <a href=\"https:\/\/www.labnol.org\/internet\/light-youtube-embeds\/27941\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Lite YouTube Embeds<\/a> -artikkelia ja lis\u00e4\u00e4 koodi ehdotetulla tavalla.<\/p>\n<p>N\u00e4m\u00e4 ovat kolme mahdollista tapaa upottaa reagoiva YouTube-video. Vaatimusten mukaan voit valita mink\u00e4 tahansa ratkaisun.<\/p>\n<h4>Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/youtube-sovellusliittyma-kuinka-saada-luettelo-kanavasi-youtube-videoista\/\" title=\"Kuinka saada luettelo kanavasi YouTube-videoista\">Kuinka saada luettelo kanavasi YouTube-videoista<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-kayttaa-youtube-sovellusliittymaa-videon-lataamiseen-youtube-kanavalle\/\" title=\"Kuinka k\u00e4ytt\u00e4\u00e4 YouTube-sovellusliittym\u00e4\u00e4 videon lataamiseen YouTube-kanavalle\">Kuinka k\u00e4ytt\u00e4\u00e4 YouTube-sovellusliittym\u00e4\u00e4 videon lataamiseen YouTube-kanavalle<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-hankkia-youtube-videotunnisteet-youtube-sovellusliittyman-avulla\/\" title=\"Kuinka hankkia YouTube-videotunnisteet YouTube-sovellusliittym\u00e4n avulla\">Kuinka hankkia YouTube-videotunnisteet YouTube-sovellusliittym\u00e4n avulla<\/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>T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4mme sinulle, kuinka upottaa reagoiva youtube-video verkkosivustoon. K\u00e4yt\u00e4mme Fancyboxia, joka tarjoaa tavan reagoiville videoille.<\/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":[414],"tags":[843],"class_list":["post-26023","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sekalaisia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/26023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=26023"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/26023\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/21607"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=26023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=26023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=26023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}