{"id":195,"date":"2026-04-24T20:21:58","date_gmt":"2026-04-24T20:21:58","guid":{"rendered":"https:\/\/www.warunginter.net\/2016\/10\/cara-menampilkan-video-youtube.html"},"modified":"2026-04-24T20:21:58","modified_gmt":"2026-04-24T20:21:58","slug":"cara-menampilkan-video-youtube-responsive-di-sideb","status":"publish","type":"post","link":"https:\/\/flycai.warunginter.net\/?p=195","title":{"rendered":"Cara Menampilkan Video Youtube Responsive Di Sidebar Blooger"},"content":{"rendered":"<div class=\"post-body entry-content\" id=\"post-body-582734198131519960\">\n<div class=\"post-body-artikel\">\n<div style=\"text-align: center;\">\n<b>Membuat Tampilan Video Youtube Responsive di Sidebar Blogspot<\/b><\/div>\n<div style=\"text-align: center;\">\n<\/div>\n<div class=\"separator\" style=\"clear: both; text-align: center;\">\n<a href=\"https:\/\/flycai.warunginter.net\/wp-content\/uploads\/2026\/06\/youtube.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"><img loading=\"lazy\" decoding=\"async\" border=\"0\" height=\"205\" src=\"https:\/\/flycai.warunginter.net\/wp-content\/uploads\/2026\/06\/youtube.png\" width=\"400\"\/><\/a><\/div>\n<p>\nUntuk membuat tampilan video youtube yang responsive di sidebar blogger\/blogspot kita membutuhkan kode embed youtube dengan tag object.<br \/>\nPerhatikan Langkah &#8211; Langkahnya : <br \/>\n1. Login ke Blogger Anda<br \/>\n2. Pilih menu template -&gt; kemudian klik Edit HTML -&gt; lalu letak kode berikut di sebelum kode tag html ]]&gt;&lt;\/b:skin&gt; (gunakan ctrl+f agar lebih mudah menemukannya)<\/p>\n<pre>.embed-box {\n\nposition: relative;\n\npadding-bottom: 62.25%; \/* ratio for youtube embed *\/\n\npadding-top: 30px;\n\nheight: auto;\n\noverflow: hidden;\n\n}\n\n.embed-box iframe,\n\n.embed-box object,\n\n.embed-box embed {\n\nposition: absolute;\n\ntop: 0;\n\nleft: 0;\n\nwidth: 100%;\n\nheight: 100%;\n\n}<\/pre>\n<p>\n3. Klik Save Template<br \/>\n4. Selanjutnya gunakan kode HTML berikut ini setiap kali ingin embed video youtube di blog. Bisa di post atau di widget HTML\/JavaScript<\/p>\n<pre>&lt;div class=\"embed-box\"&gt;\n\nKODE EMBED VIDEO YOUTUBE DENGAN TAG OBJECT DISINI\n\n&lt;\/div&gt;<\/pre>\n<p>\n5. Jadi kalau kita masukkan ke widget HTML kita jadinya seperti berikut ini:<\/p>\n<pre>&lt;div class=\"embed-box\"&gt;\n\n&lt;object data=\"\/\/www.youtube.com\/embed\/7pj_2f0Aq1w\" frameborder=\"0\" allowfullscreen&gt;&lt;\/object&gt;\n\n&lt;\/div&gt;<\/pre>\n<p>\n6. Publikasihkan dan lihat hasilnya. Tarraaaa anda berhasil membuat video youtube menjadi responsive di sidebar\/widget<\/p>\n<p><span style=\"color: red;\"><b>Note :<\/b><\/span> Alasan mengapa kode embed bawaan youtube itu tidak seo karena kode yang digunakan adalah kode tag html iframe, sedangkan di beberapa web yang membahas tentang SEO menyatakan bahwa kode iframe itu buruk untuk blog atau web dalam hal SEO.<\/p>\n<blockquote class=\"tr_bq\"><p>\n<b>Baca Juga : <a href=\"https:\/\/www.warunginter.net\/2016\/09\/cara-membuat-widget-timeline-twitter-di.html\" target=\"_blank\">Cara Menampilkan Timeline Twitter Di Blog<\/a><\/b><\/p><\/blockquote>\n<p>\nSelamat Mencoba dan Jangan Sungkan untuk bertanya, saya siap untuk membantu\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Membuat Tampilan Video Youtube Responsive di Sidebar Blogspot Untuk membuat tampilan video youtube yang responsive di sidebar blogger\/blogspot kita membutuhkan kode embed youtube dengan tag object. Perhatikan Langkah &#8211; Langkahnya&#8230; <a class=\"read-more-link\" href=\"https:\/\/flycai.warunginter.net\/?p=195\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":2008,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[62,60],"tags":[],"class_list":["post-195","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogspot","category-sosmed"],"_links":{"self":[{"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/posts\/195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=195"}],"version-history":[{"count":1,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/posts\/195\/revisions"}],"predecessor-version":[{"id":1719,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/posts\/195\/revisions\/1719"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/media\/2008"}],"wp:attachment":[{"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}