video bloger
Juni 26, 2024
By
SNH NET
Untuk menambahkan thumbnail di video player Google Drive yang akan diputar di Blogger, Anda dapat menggunakan JavaScript untuk menampilkan gambar thumbnail terlebih dahulu dan kemudian mengganti gambar tersebut dengan video saat gambar diklik. Berikut adalah langkah-langkah yang bisa Anda ikuti:
Langkah 1: Siapkan Thumbnail dan Video Link
- Thumbnail Image: Siapkan gambar yang akan digunakan sebagai thumbnail.
- Google Drive Embed Link: Dapatkan link embed dari Google Drive seperti yang dijelaskan sebelumnya.
Langkah 2: HTML
Tambahkan kode HTML berikut ke postingan atau halaman Blogger Anda di mode HTML. Gantilah YOUR_THUMBNAIL_IMAGE dengan URL gambar thumbnail dan YOUR_VIDEO_EMBED_LINK dengan link embed video Google Drive.
html<div class="video-thumbnail-container">
<img src="YOUR_THUMBNAIL_IMAGE" alt="Video Thumbnail" class="video-thumbnail" onclick="playVideo()">
<div class="video-container" id="videoContainer" style="display:none;">
<iframe id="videoFrame" src="YOUR_VIDEO_EMBED_LINK" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
Langkah 3: CSS
Tambahkan kode CSS berikut ke template Blogger Anda di dalam tag <style> atau di dalam Custom CSS jika Anda menggunakan tema kustom.
css.video-thumbnail-container {
position: relative;
max-width: 100%;
}
.video-thumbnail {
width: 100%;
cursor: pointer;
}
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Langkah 4: JavaScript
Tambahkan kode JavaScript berikut di bagian <head> template Anda atau sebelum penutup tag </body>.
html<script>
function playVideo() {
var thumbnail = document.querySelector('.video-thumbnail');
var videoContainer = document.getElementById('videoContainer');
var videoFrame = document.getElementById('videoFrame');
thumbnail.style.display = 'none';
videoContainer.style.display = 'block';
videoFrame.src += "&autoplay=1";
}
</script>
Contoh Lengkap
Jika Anda mengikuti langkah-langkah di atas, berikut adalah contoh lengkap dari HTML, CSS, dan JavaScript yang akan Anda tambahkan ke Blogger:
HTML:
html<div class="video-thumbnail-container">
<img src="https://via.placeholder.com/640x360.png?text=Video+Thumbnail" alt="Video Thumbnail" class="video-thumbnail" onclick="playVideo()">
<div class="video-container" id="videoContainer" style="display:none;">
<iframe id="videoFrame" src="https://drive.google.com/file/d/YOUR_VIDEO_ID/preview" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
CSS:
css.video-thumbnail-container {
position: relative;
max-width: 100%;
}
.video-thumbnail {
width: 100%;
cursor: pointer;
}
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
JavaScript:
html<script>
function playVideo() {
var thumbnail = document.querySelector('.video-thumbnail');
var videoContainer = document.getElementById('videoContainer');
var videoFrame = document.getElementById('videoFrame');
thumbnail.style.display = 'none';
videoContainer.style.display = 'block';
videoFrame.src += "&autoplay=1";
}
</script>
Dengan menggunakan langkah-langkah ini, Anda akan memiliki video player Google Drive dengan thumbnail yang dapat diklik untuk memutar video di Blogger Anda.
Written by Admin
ChromeGT is a modern, powerful and professional Blogger template made for your Portfolio, Business or almost any other kind of website.
0 Comments: