Jadikan 100% Video YouTube Responsif dengan CSS untuk Template Blogger – Bloggerlly.com

Jadikan 100% Video YouTube Responsif dengan CSS untuk Template Blogger – Bloggerlly.com

Abrisam

Desember 17, 2022

Artikel ini akan berguna untuk semua pengguna blogger pemula yang mengubah template blogger mereka 100% Responsif Video YouTube. Berikut adalah kode CSS Sederhana untuk Membuat video YouTube 100% responsif dengan CSS untuk Template Blogger.

Saya menulis artikel ini untuk membantu blogger pemula. yang mengatasi masalah dengan template blogger mereka. Seperti yang sudah Anda baca dari judulnya. Saya ingin membantu sesama blogger untuk membuat semua video YouTube responsif secara default untuk template blogger mereka.

Hari ini Anda akan mempelajari trik CSS yang membantu Anda membuat semua video YouTube responsif hanya dengan menggunakan tautan video YouTube. Semoga Anda mendapatkan solusi terkait pertanyaan Anda “Bagaimana cara membuat video youtube saya responsif di Blogger?”.

Sebelum memulai artikel ini, saya ingin meminta Anda untuk mengikuti semua langkah dan menyimpan Template Blogger Anda saat ini sebelum menambahkan CSS ke dalamnya.

Hari ini saya membagikan trik sederhana dan mudah yang membantu Anda membuat video sematan YouTube responsif terhadap situs web blogger Anda (BlogSpot). Jika Anda ingin membuat video Anda responsif untuk perangkat apa pun atau ukuran media apa pun. Kemudian Anda dapat melakukannya dengan banyak cara. Tapi di sini ada cara sederhana dan mudah yang membuat Anda nyaman untuk melakukan tugas ini.

Langkah Mudah untuk membuat video YouTube responsif untuk semua template blogger.

Dengan menggunakan proses berikut, seseorang dapat mengaktifkan template bloggernya untuk membuat semua video YouTube responsif secara default. Silakan ikuti langkah-langkah yang diberikan di bawah ini.

Langkah 1: Tambahkan CSS ke Template Blogger

Langkah 1: Tambahkan CSS berikut di bagian gaya. TAMBAHKAN kode Responsif ke Bagian Anda harus membuat kelas untuk membuat video responsif. Jadi, Anda perlu mengikuti langkah-langkah yang dijelaskan di bawah ini.

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

Langkah 1: Tambahkan CSS ke Template Blogger

Tip dan Trik Terbaik untuk Anda:

Cara menambahkan CSS di Template Blogger:

Langkah 1. Buka dasbor blogger > Tema > Mengedit HTML.

Langkah 2. Sekarang temukan kode berikut atau .

Langkah 3. Sekarang tambahkan kode kelas CSS berikut setelah body class. CSS Video Iframe Responsif.

Langkah 2: TAMBAHKAN Kode Responsif YouTube untuk Posting

Langkah 4: TAMBAHKAN Responsif

kelas untuk video Anda di pos.

Setelah menulis/menambahkan kode CSS mansion di atas ke HTML tema blogger. Sekarang Anda hanya perlu melakukan satu hal, tambahkan semua iframe tersemat di antara

')})},5e3); // Lazy Load Share var lazyshare=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyshare||0!=document.body.scrollTop&&!1===lazyshare)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//platform-api.sharethis.com/js/sharethis.js#property=5f5e6cc99486490011bc399d&product=inline-share-buttons";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyshare=!0)},!0); // Lazy Fancy Box var lazyfancybox=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyfancybox||0!=document.body.scrollTop&&!1===lazyfancybox)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyfancybox=!0)},!0); // CSS Fancy Box function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"); // Fancybox Setting $(document).ready(function(){$(".post-body img").parent("a:not(.no-lightbox)").each(function(){$(this).attr("src",$(this).find("img").attr("src")),$(this).attr("data-fancybox","postimages")}),$(".post-body img").parent("a:not(.no-lightbox)").fancybox({margin:[50,0],onComplete:function(t,o){t.scaleToActual(0,0,0),console.log(t)}})}); // Highlighter $('i[rel="pre"]').replaceWith(function(){return $("

"+$(this).html()+"

")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i

Arlina Info