Cara Menciptakan Tombol Full Screen Landscape Video Iframe Di Blogger

Mungkin ada yang ingin tau bagaimana cara menciptakan tombol FULLSCREEN terpisah dari video controls di Blogger/blogspot untuk semua perangkat? dan menyebabkan tampilan full screen tersebut berkembang menjadi landscape atau melaksanakan rotasi layar HP secara otomatis? baik itu untuk laptop/komputer terutama di hp/smartphone. Tombol full screen memungkinkan pengunjung untuk sanggup menyaksikan video di blog dengan tampilan satu layar penuh.

Masalahnya adalah, ketika kita membagikan video denga instruksi iframe (dan lainnya) di blog, dan ingin menontonnya dalam mode full screen ketika menggukanan handphone/smartphone, video tersebut tetap dalam posisi portrait, tidak melaksanakan 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 menyerupai tablet dan smartphone.

Nah, bagaimana caranya supaya video yang kita bagikan di blogger/blogspot itu, kalau 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 menyerupai ini di format video atau instruksi 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 sanggup juga menyerupai 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 instruksi berikut di bawah instruksi 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 yakni 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 instruksi </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 sanggup dilihat menyerupai pada video berikut ini:

FULL SCREEN

Perhatian:
Untuk memastikan tombol Full Screen bekerja sempurna, silahkan klik tombol FULL SCREEN dari pola tersebut di smartphone, memakai 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 menciptakan tombol fullscreen dari video/iframe supaya video tampil landscape/rotasi tampilan layar hp otomatis menyerupai pada tutorial di atas, sanggup juga diterapkan pada platform lainnya menyerupai Wordpress. Karena di tutorial ini tidak ada tag khusus Blogger yang digunakan.

Selamat mencoba dan semoga sukses!

Advertisement