{"id":29737,"date":"2021-06-19T18:14:00","date_gmt":"2021-06-19T15:14:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29737"},"modified":"2021-10-17T04:13:26","modified_gmt":"2021-10-17T01:13:26","slug":"hur-man-baddar-in-responsiv-youtube-video-pa-webbplatsen","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-baddar-in-responsiv-youtube-video-pa-webbplatsen\/","title":{"rendered":"Hur man b\u00e4ddar in responsiv YouTube-video p\u00e5 webbplatsen"},"content":{"rendered":"<p>Att s\u00e4tta YouTube-videor p\u00e5 webbplatser \u00e4r vanligt idag. YouTube tillhandah\u00e5ller en iframe-kod f\u00f6r att b\u00e4dda in videon p\u00e5 webbplatser. Videon som \u00e5terges genom denna iframe-kod svarar dock inte. Det betyder att p\u00e5 sm\u00e5 enheter som mobil, surfplatta kanske din video inte ser bra ut.<\/p>\n<p>Egentligen m\u00e5ste dina inb\u00e4ddade YouTube-videor vara lyh\u00f6rda f\u00f6r en b\u00e4ttre anv\u00e4ndarupplevelse. I den h\u00e4r artikeln studerar vi hur man b\u00e4ddar in responsiva YouTube-videor p\u00e5 din webbplats.<\/p>\n<p>Jag hittade 3 m\u00f6jliga s\u00e4tt att uppn\u00e5 v\u00e5rt slutresultat. L\u00e5t oss se det en efter en.<\/p>\n<h3>B\u00e4dda in responsiv YouTube-video med Bootstrap<\/h3>\n<p>Bootstrap \u00e4r det mest popul\u00e4ra frontend-verktyget som hj\u00e4lper till att utveckla responsiva webbplatser. Det ger ocks\u00e5 en enkel l\u00f6sning f\u00f6r att g\u00f6ra din YouTube-video lyh\u00f6rd.<\/p>\n<p>F\u00f6r att komma ig\u00e5ng m\u00e5ste du f\u00f6rst inkludera CSS-filen i Bootstrap enligt f\u00f6ljande. Om du redan anv\u00e4nder Bootstrap i ditt projekt hoppar du \u00f6ver det h\u00e4r steget.<\/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>Anv\u00e4nd sedan f\u00f6ljande HTML f\u00f6r att b\u00e4dda in din video med en Bootstrap.<\/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>Ers\u00e4tt platsh\u00e5llaren VIDEO_ID med det faktiska video-id: t. Prova det och du borde se att din video fungerar bra p\u00e5 mindre enheter.<\/p>\n<p>Du kan l\u00e4sa om den h\u00e4r inb\u00e4ddningsmetoden i <a href=\"https:\/\/getbootstrap.com\/docs\/4.1\/utilities\/embed\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Bootstrap-dokumentationen<\/a>.<\/p>\n<h3>Responsiv YouTube-video med Fancybox<\/h3>\n<p>Det h\u00e4r alternativet \u00e4r lite annorlunda. H\u00e4r ist\u00e4llet f\u00f6r att visa video direkt, visar vi en miniatyr av YouTube-video. Och sedan klicka p\u00e5 en miniatyrbild, kommer din video att spela upp i popup-f\u00f6nstret. Detta kan g\u00f6ras med en <a href=\"https:\/\/fancyapps.com\/fancybox\/3\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">fancybox<\/a>.<\/p>\n<p>F\u00f6r att kunna anv\u00e4nda Fancybox m\u00e5ste du inkludera f\u00f6ljande CSS- och JS-filer p\u00e5 din webbplats.<\/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>Efter detta placerar du koden nedan s\u00e5 \u00e4r du klar.<\/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-inb\u00e4ddningar<\/h3>\n<p>I den f\u00f6rsta metoden har vi anv\u00e4nt iframe-kod. N\u00e4r du anv\u00e4nder en iframe m\u00e5ste webbl\u00e4saren ladda ner n\u00e4stan 800 kB data f\u00f6r att g\u00f6ra en video.<\/p>\n<p>Med fancybox kan du minska denna belastning. Men igen m\u00e5ste du inkludera deras CSS och JS. Att l\u00e4gga till dessa filer via CDN rekommenderas f\u00f6r att frig\u00f6ra serverbelastning.<\/p>\n<p>N\u00e4r jag arbetade med detta \u00e4mne kom jag \u00f6ver en artikel som f\u00f6rklarar inb\u00e4ddning av YouTube-videor p\u00e5 ett annat s\u00e4tt. Det beh\u00f6ver varken anv\u00e4nda en iframe vid sidl\u00e4sning eller beh\u00f6ver inkludera n\u00e5gra filer.<\/p>\n<p>Artikeln inneh\u00e5ller kod som alla enkelt kan l\u00e4gga till i sin applikation. F\u00f6lj <a href=\"https:\/\/www.labnol.org\/internet\/light-youtube-embeds\/27941\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Lite YouTube-inb\u00e4ddningsartikeln<\/a> och <a href=\"https:\/\/www.labnol.org\/internet\/light-youtube-embeds\/27941\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l\u00e4gg<\/a> till koden enligt f\u00f6rslaget.<\/p>\n<p>Det h\u00e4r \u00e4r de 3 m\u00f6jliga s\u00e4tten att b\u00e4dda in en responsiv YouTube-video. Beroende p\u00e5 dina krav kan du v\u00e4lja vilken som helst av l\u00f6sningarna.<\/p>\n<h4>relaterade artiklar<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/youtube-api-hur-far-jag-en-lista-over-youtube-videor-fran-din-kanal\/\" title=\"Hur f\u00e5r jag en lista \u00f6ver YouTube-videor fr\u00e5n din kanal\">Hur f\u00e5r jag en lista \u00f6ver YouTube-videor fr\u00e5n din kanal<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/hur-man-anvander-youtube-api-for-att-ladda-upp-video-pa-youtube-kanal\/\" title=\"Hur man anv\u00e4nder YouTube API f\u00f6r att ladda upp video p\u00e5 YouTube-kanal\">Hur man anv\u00e4nder YouTube API f\u00f6r att ladda upp video p\u00e5 YouTube-kanal<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/sa-har-far-du-youtube-videotaggar-med-youtube-api\/\" title=\"S\u00e5 h\u00e4r f\u00e5r du YouTube-videotaggar med YouTube API\">S\u00e5 h\u00e4r f\u00e5r du YouTube-videotaggar med YouTube API<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I den h\u00e4r artikeln visar vi dig hur du b\u00e4ddar in responsiv youtube-video p\u00e5 webbplatsen. Vi anv\u00e4nder Fancybox som ger ett s\u00e4tt f\u00f6r responsiv video.<\/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":[418],"tags":[850],"class_list":["post-29737","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diverse","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/29737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=29737"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/29737\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/21607"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=29737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=29737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=29737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}