Cara Membuat Tombol Full Screen Landscape Video iFrame di Blogger

Mungkin ada yang penasaran bagaimana cara membuat tombol FULLSCREEN terpisah dari video controls di Blogger/blogspot untuk semua perangkat? dan menjadikan tampilan full screen tersebut berubah menjadi landscape atau melakukan rotasi layar HP secara otomatis? baik itu untuk laptop/komputer terutama di hp/smartphone. Tombol full screen memungkinkan pengunjung untuk dapat menyaksikan video di blog dengan tampilan satu layar penuh.
Cara Membuat Tombol Full Screen Landscape Video iFrame

Masalahnya adalah, ketika kita membagikan video denga kode iframe (dan lainnya) di blog, dan ingin menontonnya dalam mode full screen saat menggukanan handphone/smartphone, video tersebut tetap dalam posisi portrait, tidak melakukan rotasi landscape secara otomatis.

Masalah ini sering ditemui pada tv online yang mengandalkan fitur navigasi bawaan dari video control. Fitur fullscreenya memang berfungsi dengan baik untuk pengguna di perangkat pc/laptop, tetapi tidak untuk pengguna device yang lebih kecil seperti tablet dan smartphone.

Nah, bagaimana caranya agar video yang kita bagikan di blogger/blogspot itu, jika ingin ditonton dengan mode full screen, tampilan layar benar-benar berotasi otomatis menjadi landscape/horizontal untuk pengguna hp/mobile.

Dan solusinya ialah, kita harus menambahkan sebuah tombol fullscreen untuk mewujudkan hal itu. Berikut cara bikinnya.

Langkah 1
Tambahkan tag seperti ini di format video atau kode iframe video:
<div id="frameFullscreen" class="frameFullscreen">
<iframe frameborder="0" scrolling="no" src="https://www.youtube.com/embed/jdgfD8ac6ao?rel=0&showinfo=0&autoplay=0" height="100%" width="100%"></iframe>
</div>

Atau bisa juga seperti ini:
<iframe id="frameFullscreen" frameborder="0" scrolling="no" src="https://www.youtube.com/embed/jdgfD8ac6ao?rel=0&showinfo=0&autoplay=0" height="100%" width="100%"></iframe>

Langkah 2
Tambahkan kode berikut di bawah kode tadi:
<span class='toggle' href='javascript:void(0)' id='fullscreenbtn' role='button' tabindex='0'><svg class='icons' viewBox='0 0 24 24'><path fill="#000000" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z" /></svg>FULL SCREEN</span>

Kode tersebut adalah tombol untuk memanggil tampilan FULL SCREEN. Yang akan diaktifkan oleh javascript pada langkah selanjutnya.

Untuk mengedit tampilan tombol tersebut edit CSS berikut ini:
<style type="text/css">
.toggle{display:block;background-color:#888;height:30px;line-height:30px;overflow:hidden;margin:10px auto 0;text-align:center;border-radius:3px;color:#fff;cursor:pointer}
.toggle .icons{width:20px;height:20px;vertical-align:middle;fill:#000;margin-right:15px}
</style>

Tampilan tombolnya silahkan kembangkan sesuai kreatifitas.

Langkah 3
Letakkan JavaScript berikut ini di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
<script type='text/javascript'>
//<![CDATA[
var vid, fullscreenbtn;
function intializePlayer(){
vid = document.getElementById("frameFullscreen");
fullscreenbtn = document.getElementById("fullscreenbtn");
fullscreenbtn.addEventListener("click",toggleFullScreen,false);
}
window.onload = intializePlayer;
function toggleFullScreen(){
if(vid.requestFullScreen){
vid.requestFullScreen();
  screen.orientation.lock("landscape-primary");
} else if(vid.mozRequestFullScreen){
vid.mozRequestFullScreen();
  screen.orientation.lock("landscape-primary");
} else if(vid.webkitRequestFullscreen){
vid.webkitRequestFullscreen();
  screen.orientation.lock("landscape-primary");
} else if(vid.msRequestFullscreen){
vid.msRequestFullscreen();
  screen.orientation.lock("landscape-primary");
}
}
</script>

Langkah 4
Simpan tema, dan lihat hasilnya.

Demonya bisa dilihat seperti pada video berikut ini:

FULL SCREEN
Perhatian:
Untuk memastikan tombol Full Screen bekerja sempurna, silahkan klik tombol FULL SCREEN dari contoh tersebut di smartphone, menggunakan browser Google Chrome.

Simak juga: Cara Memasang Video Youtube di Postingan Blog AMP

Cara ini masih jauh dari sempurna. Karena untuk beberapa browser (terutama browser versi lama), tampilan fullscreen terkadang masih portrait, tidak merotasi otomatis layar hp/smartphone. Cara ini bekerja dengan sangat baik di browser Google Chrome versi terbaru.

Sebetulnya cara membuat tombol fullscreen dari video/iframe agar video tampil landscape/rotasi tampilan layar hp otomatis seperti pada tutorial di atas, bisa juga diterapkan pada platform lainnya seperti Wordpress. Karena di tutorial ini tidak ada tag khusus Blogger yang digunakan.

Selamat mencoba dan semoga sukses!

Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K
Free and premium blogger templates