Membuat Tombol Full Screen Landscape Video iFrame di Blogger ~ Aan Channel

Mungkin ada yang penasaran bagaimana langkah mengakibatkan tombol FULLSCREEN terpisah dari video controls di Blogger/blogspot untuk seluruh perangkat? dan menjadikan penampilan full screen berikut berubah menjadi landscape atau lakukan rotasi layar HP secara otomatis? baik itu untuk laptop/komputer terlebih di hp/smartphone. Tombol full screen amat mungkin pengunjung untuk dapat lihat video di blog bersama dengan penampilan satu layar penuh.

Masalahnya adalah, saat kami membagikan video denga kode iframe (dan lainnya) di blog, dan menginginkan menontonnya didalam mode full screen selagi menggukanan handphone/smartphone, video berikut tetap didalam posisi portrait, tidak lakukan rotasi landscape secara otomatis.

Masalah ini sering ditemui terhadap tv online yang mengandalkan fitur navigasi bawaan dari video control. Fitur fullscreenya sebenarnya berfungsi bersama dengan baik untuk pengguna di perangkat pc/laptop, tapi tidak untuk pengguna device yang lebih kecil layaknya pill dan smartphone.

Nah, bagaimana caranya supaya video yang kami bagikan di blogger/blogspot itu, terkecuali menginginkan ditonton bersama dengan mode full screen, penampilan layar sangat berotasi otomatis menjadi landscape/horizontal untuk pengguna hp/mobile.

Dan solusinya ialah, kami mesti menambahkan sebuah tombol fullscreen untuk mewujudkan perihal itu. Berikut langkah 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>

Catatan tambahan

Tambahkan allowfullscreen="true" pada iframe agar mendapatkan izin full screen tanpa tombol.

Gunakan src="https://drive.google.com/file/d/1Z3dSPFqB1WSc4INlTJCoPehNCr5FiBSS/preview" jika video berasal dari Google Drive.

Sesehingga menjadi

<iframe allowfullscreen="true" id="frameFullscreen" frameborder="0" scrolling="no" src="https://drive.google.com/file/d/1Z3dSPFqB1WSc4INlTJCoPehNCr5FiBSS/preview" 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 dan letakkan di bawah kode di atas:

<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 </body>

<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.

Contoh dapat kalian lihat di AeM Movie

HALAMAN SELANJUTNYA:

About Aan Channel

Blog channel yang sekedar ingin berbagi, mohon maah jika terdapat kesamaan isi postingan, hal itu tidak terlepas dari hasil pencarian saat membutuhkan, dan saya share ulang.

Aan Channel

Membuat Tombol Full Screen Landscape Video iFrame di Blogger

About Aan Channel

Related Post