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.

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.

Cara Membuat Tombol Fullscreen di Blog / Website

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!