Javascript YouTube API - Cara Embed Video Dengan YouTube API di Blogger

Mengintegrasikan YouTube API ke situs web Anda dapat meningkatkan fungsionalitas dan pengalaman pembaca secara signifikan. Dengan memanfaatkan teknologi API, Anda memperoleh akses ke gudang konten video YouTube yang luas, yang memungkinkan Anda untuk mengintegrasikan video-video relevan dari YouTube secara langsung ke situs web Anda. Ini membuka dunia kemungkinan, seperti menyematkan video tutorial, memamerkan demonstrasi produk, atau menyediakan konten edukasional kepada pengguna Anda.

Dengan YouTube API, Anda dapat mencari video secara terprogram, mengambil detail video, dan menyematkannya secara dinamis di dalam halaman web Anda. Ini tidak hanya memperkaya konten situs web Anda, tetapi juga meningkatkan keterlibatan dengan menawarkan elemen visual dan interaktif yang berharga kepada pembaca blog anda.

Lebih jauh lagi, dengan memanfaatkan fitur-fitur API seperti kontrol pemutaran video, teks, dan kustomisasi gambar mini, Anda dapat menyesuaikan pengalaman video agar selaras dengan preferensi merek dan desain Anda. YouTube API memberdayakan Anda untuk memanfaatkan ekosistem YouTube yang luas, meningkatkan situs web Anda dengan konten video yang menarik dan menciptakan pengalaman pengguna yang lebih mendalam dan menarik.

Panduan ini agak beda dengan panduan sebelumnya yang kami tulis, pada artikel ini kami akan coba menjelaskan cara embed video YouTube dengan bantuan API. Pada tutorial ini kita akan menggunakan bahasa Javascript untuk menghubungkan Blogger dengan platform Youtube.

1. Apa Manfaat Menggunakan YouTube API untuk Blogger?

Banyak pemilik bisnis dan pemasar belum menerapkan YouTube API ke dalam bisnis mereka karena mereka kurang memahami manfaat menggunakan kunci YouTube API. Kita dapat mengatakan bahwa semuanya tentang waktu yang dihabiskan untuk membuat konten video berkualitas tinggi. Biasanya, yang dilakukan bisnis lain adalah membuat video dan mengunggahnya di saluran mereka. Tujuan melakukan ini adalah untuk mendapatkan like dan pelanggan.

Namun, sungguh mengejutkan mengetahui bahwa ini bukanlah satu-satunya cara untuk mempromosikan bisnis kita. Kita dapat memanfaatkan bantuan kunci API YouTube untuk melakukannya. Mari kita rinci manfaat apa saja yang didapat menggunakan YouTube API untuk blog anda.

Akses ke pustaka video yang luas: YouTube API memungkinkan Anda memanfaatkan pustaka video YouTube yang luas, memberi Anda akses ke jutaan video di berbagai kategori dan genre.
Integrasi yang mudah: YouTube API menyediakan antarmuka yang lugas dan terdokumentasi dengan baik, sehingga relatif mudah untuk mengintegrasikan video ke situs web atau aplikasi Anda.
Konten dinamis: Dengan menggunakan YouTube API, Anda dapat memuat dan menampilkan video secara dinamis di situs web Anda, memastikan bahwa konten Anda tetap segar dan menarik bagi pengguna Anda.
Kustomisasi video: API menawarkan berbagai opsi kustomisasi, yang memungkinkan Anda menyesuaikan tampilan, kontrol, dan fungsionalitas pemutar video agar sesuai dengan desain dan persyaratan situs web Anda.
Pemutaran video yang lancar: API YouTube memastikan pemutaran video yang lancar dengan menangani semua streaming dan buffering yang diperlukan, memberikan pengalaman menonton yang konsisten dan optimal bagi pengguna Anda.
Kompatibilitas lintas perangkat: Video yang dimuat melalui API YouTube dioptimalkan untuk kompatibilitas lintas perangkat, sehingga mudah ditonton di desktop, laptop, ponsel cerdas, dan tablet tanpa perlu pengodean atau penyesuaian tambahan.
Kemampuan pencarian dan pemfilteran: API memungkinkan Anda mencari video berdasarkan kriteria tertentu seperti kata kunci, kategori, dan filter yang ditentukan pengguna, sehingga Anda memiliki fleksibilitas untuk menyusun dan menampilkan konten yang relevan.
Analisis dan wawasan: Dengan memanfaatkan YouTube API, Anda memperoleh akses ke analisis dan wawasan video yang berharga, termasuk jumlah penayangan, suka, komentar, dan metrik keterlibatan. Data ini dapat membantu Anda memahami audiens dan membuat keputusan yang tepat tentang strategi konten Anda.
Peluang monetisasi: Jika Anda seorang kreator konten, YouTube API memungkinkan Anda untuk mengintegrasikan iklan dan memonetisasi video Anda, yang menyediakan aliran pendapatan tambahan untuk situs web atau aplikasi Anda.
Fitur komunitas dan sosial: YouTube adalah platform yang sangat sosial, dan dengan menggunakan YouTube API, Anda dapat memanfaatkan fitur-fitur seperti berbagi video, komentar, dan langganan, yang mendorong keterlibatan dan interaksi komunitas di situs web Anda.
Secara keseluruhan, mengintegrasikan YouTube API ke situs web Anda menawarkan banyak manfaat, termasuk akses ke pustaka video yang luas, integrasi yang mudah, konten yang dinamis, opsi penyesuaian, pemutaran yang lancar, kompatibilitas lintas perangkat, kemampuan pencarian, wawasan analisis, peluang monetisasi, dan fitur sosial.

2. Petunjuk Penggunaan YouTube API

Pertama, Anda perlu menuju ke console.developers.google.com untuk mendapatkan kunci API. Di sini, Anda dapat membuat proyek baru atau memilih proyek yang sudah ada.

Langkah 1: Masuk ke Google Developer Console

Buat akun Google dan gunakan kredensial untuk masuk ke Google Developers Console.

Langkah 2: Buat proyek baru

Saat pertama kali masuk, Anda akan melihat dasbor kosong. Di sudut kanan atas layar, klik Buat Proyek. Anda akan diarahkan ke layar tempat Anda dapat menambahkan nama proyek, dan memilih organisasi dan URL dari kotak dropdown. Setelah Anda membuat proyek, semua yang Anda lakukan selanjutnya termasuk Kunci API akan khusus untuk proyek tersebut. Jika Anda mengerjakan beberapa proyek secara bersamaan, pastikan proyek yang benar dipilih.

Langkah 3: Di dasbor proyek baru, jelajahi dan aktifkan API

Anda sekarang akan dibawa ke dasbor baru dengan berbagai menu seperti Nama proyek dan sumber daya. Temukan menu untuk Memulai dan klik Explore dan Enable APIs. Atau, Anda dapat menavigasi ke APIs dan services > library.

Langkah 4: Di pustaka, navigasikan ke YouTube Data API v3 di bawah YouTube API

Konsol YouTube API dibagi menjadi beberapa bagian. Navigasikan ke YouTube API dan pilih YouTube Data API v3 atau Anda dapat mencari YouTube Data API di konsol pencarian.

Langkah 5: Aktifkan API

Setelah Anda tiba di halaman YouTube Data API, klik tombol Enable.

Langkah 6: Buat kredensial

Setelah mengklik tombol Enable, Anda akan dapat melihat halaman ikhtisar. Klik Buat Credentials di sudut kanan atas. Di jendela Credentials, pilih YouTube Data API v3.

Jika anda bingung, baca artikel kami sebelumnya tentang pemnuatan kunci YouTube API di Google Cloud Platform.

3. Implemetasi Javascript Yotube API di Template Blogger

Bagian ini merupakan bagian terpenting dari artikel ini, karena pada bagian ini kami akan membahas cara menggunakan YouTube API dengan Javascript. Script java tersebut akan kita letakkan kedalam template Blogger, yang hasilnya akan tampil dihalaman Dashboard Blogger anda.

Untuk menerapkan Javascript tersebut, anda harus membuka isi script template anda. Kita anggap saja anda telah berada di halaman HTML template Blogger anda, sekarang anda ikuti langkah-langkah berikut untuk menerapkan embed Youtube API dengan Javascript.

a. Menempatkan video Youtube di sidebar Blogger.

Ada beberapa cara mengembed video Youtube (caranya hampir mirip dengan schema.org JSON LD), anda bisa meletakkannya di sidebar, halaman artikel/postingan ataupun dibagian dashboard blogber anda. Bagian pertama ini saya akan praktekkan cara embed video Youtube di bagian sidebar.

Pada contoh ini kita akan meletakkan video Youtube dibagian paling akhir atau bagian bawah dari sisi sidebar blogger.

Misalkan bagian akhir sidebar anda adalah menu "Contact US". Pada template blogger anda cari "Contact Us". Setelah anda menemukan script "Contact Us. Anda ketikkan script di bawah ini di bagian akhir dari script "Contact Us".

<div class='container'>
<h3><data:blog.pageTitle/></h3>
<div class='video-container' id='video-container'>
</div>
<footer>
<a href='https://winunixbsd.blogspot.com/' id='credit-link' target='_blank'>Website Para Blogger Mania</a>
<p id='error-message' style='color: red; display: none;'/>
</footer>
</div>

Setelah anda selesai mengetikkan script tersebut hasilnya adalah seperti gambar di bawah ini.

Penampakkan sementara video Yotube akan terlihat seperti gambar di atas. Videonya belum muncul. Agar Video Yotube tersebut dapat muncul anda harus menambahkan script Javascript. Caranya sangat mudah, cari script </body>. Pada bagian atas dari secript </body> tersebut anda ketikkan script Javascript di bawah ini.

<script type='text/javascript'>
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
const creditLink = document.getElementById(&#39;credit-link&#39;);
const errorMessage = document.getElementById(&#39;error-message&#39;);
const expectedHref = &#39;https://inchimedia.blogspot.com/&#39;;
const expectedText = &#39;Website Untuk Para Blogger Mania&#39;;

function checkCreditLink() {
if (creditLink.href !== expectedHref || creditLink.textContent !== expectedText) {
errorMessage.style.display = &#39;block&#39;;
}
else
{ errorMessage.style.display = &#39;none&#39;;}}
checkCreditLink();
});
<!-- Import Api Below & Import Your Chanel Id -->      
const apiKey = &#39;AIzaSyDcPVRdk0lcQDZXK-UTb7-l89mG9l2nsao&#39;;
const channelId = &#39;UC7g_kskQnuYrRJMDQQJGnkw&#39;;
const videoContainer = document.getElementById(&#39;video-container&#39;);

fetch(`https://www.googleapis.com/youtube/v3/search?key=${apiKey}&amp;channelId=${channelId}&amp;part=snippet,id&amp;order=date&amp;maxResults=1`)
.then(response =&gt; response.json())
.then(data =&gt; {
const videos = data.items;
videos.forEach(video =&gt; {
const videoId = video.id.videoId;
const videoTitle = video.snippet.title;
const videoItem = document.createElement(&#39;div&#39;);
videoItem.classList.add(&#39;video-item&#39;);
videoItem.innerHTML = `
<iframe allow='autoplay' src='https://www.youtube.com/embed/${videoId}?autoplay=1&amp;mute=1'/>
<a class='video-title' href='https://www.youtube.com/embed/${videoId}' target='_blank'/>
`;
videoContainer.appendChild(videoItem);
});
})
.catch(error =&gt; console.error(&#39;Error fetching YouTube API:&#39;, error));
</script>

Sekarang kita lihat lagi hasilnya.

Selamat! Anda telah berhasil mengembed Video Yotube dengan Javascript. Lihat hasilnya seperti gambar di atas.

a. Menempatkan video Youtube di Halaman Artikel/Postingan

Setelah anda sukses menyematkan video Yotube di bagian sidebar dari blogger anda, sekarang kita coba menyematkan/embed video youtube di bagian postignan atau artikel. Pada bagian ini agak sulit, karena anda harus menemukan bagian akhir dari halaman postingan.

Jika anda telah mengetahui halaman akhir dari postingan template blogger anda, langsung saja copy paste script no pertama di atas. Script Javascriptnya gak usah anda ota-atik. Biarkan saja letaknya di atas </body>. Jadi yang harus anda ubah posisi script pertama yaitu:

<div class='container'>
<h3><data:blog.pageTitle/></h3>
<div class='video-container' id='video-container'>
</div>
<footer>
<a href='https://winunixbsd.blogspot.com/' id='credit-link' target='_blank'>Website Para Blogger Mania</a>
<p id='error-message' style='color: red; display: none;'/>
</footer>
</div>

Bila anda berhasil, hasilnya akan terlihat seperti gambar di bawah ini.

4. Faktor Kesulitan Embed Video YT dengan Javascript

Seperti telah saya uraikan di bagian atas, bagian paling sulit dari menyematkan video Youtube adalah cara menempatkan scriptnya. Jangankan bagi anda yang baru mengenal Javascript atau baru mengenal blogger, para senior pun terkadang sangat sulit dalam menempatkan video YT tersebut.

Faktor tersulitnya adalah anda harus mencari bagian yang tepat untuk meletakkan script tersebut. Misalkan anda akan mengembed video YT di bagian awal sidebar. Yang sangat sulit adalah mencari bagian scrip sidebar tersebut. Kalau sudah ketemu sangat gampang, anda langsung copy paste aja. Langsung jadi dach.

Lalu solusinya bagaimana, yach banyak berlatih. Anda bisa coba-coba menempatkan script tersebut sesuai dugaan anda. Kalau salah yach, cari tempat yang pas. Terus saja begitu sampai ketemu tempat yang pas untuk meletakkan script tersebut.

Jika anda telah berhasil mengembed video YT dan menerapkannya di Blogger anda, pastilah anda sudah tahu keuntugannya apa. Bisa menang dua kali anda. Dapat pembaca di Blogger dan juga dapat penonton di Youtube. Double untung kalau kata orang.

Jadi tunggu apalagi, Ayo....! segera pake video Youtube di Blogger anda biar double headshoot untungnya.

Warnet Dapurnet

Internet Cafe