Cara Membuat Tombol Full Screen Landscape Video IFrame Di Blogger Cara Membuat Blog Full Screen

Hi, berjumpa kembali, sesi kali ini akan dibahas tentang cara membuat blog full screen Cara Membuat Tombol Full Screen Landscape Video iFrame di Blogger simak selengkapnya 

Mungkin ada yang penasaran betapa dengan cara apa cara membuat tombol FULLSCREEN terisolasi dari video controls di Blogger/blogspot untuk semua perangkat? dengan menjadikan pengejawantahan full screen tersebut berubah menjadi landscape alias melakukan perkisaran tebeng HP secara otomatis? baik itu untuk laptop/komputer terpenting di hp/smartphone. Tombol full screen memungkinkan pengunjung untuk kena mengelih video di blog dengan pengejawantahan satu tebeng penuh.

Masalahnya adalah, ketika kita mengasihkan video denga lambang iframe (dan lainnya) di blog, dengan kenyir menontonnya di mode full screen saat menggukanan handphone/smartphone, video tersebut tetap di situs portrait, tidak melakukan perkisaran landscape secara otomatis.

Masalah ini sering ditemui bagi tv online yang mengandalkan karakteristik pelayaran bawaan dari video control. Fitur fullscreenya memang berfungsi dengan baik untuk pengguna di perangkat pc/laptop, melainkan tidak untuk pengguna device yang lebih kecil sesuai tablet dengan smartphone.

Nah, betapa dengan cara apa caranya hendaknya video yang kita bagikan di blogger/blogspot itu, jika kenyir ditonton dengan mode full screen, pengejawantahan tebeng sepenuh hati 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 sesuai ini di format video alias lambang 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 agak sesuai 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 lambang berikut di bawah lambang 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 merupakan tombol untuk memanggil pengejawantahan FULL SCREEN. Yang akan diaktifkan sebab javascript bagi langkah selanjutnya.

Untuk merevisi pengejawantahan tombol tersebut edit CSS berikut ini:

<style type="text/css">

.toggledisplay: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 .iconswidth: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 lambang </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, dengan lihat hasilnya.

Demonya bisa dilihat sesuai bagi video berikut ini:

FULL SCREEN

Perhatian:

Untuk memastikan tombol Full Screen bergiat 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 jumlah browser (terutama browser edisi lama), pengejawantahan fullscreen terkadang masih portrait, tidak mengalihtugaskan otomatis tebeng hp/smartphone. Cara ini bergiat dengan sangat baik di browser Google Chrome edisi terbaru.

Sebetulnya cara membuat tombol fullscreen dari video/iframe hendaknya video tampil landscape/rotasi pengejawantahan tebeng hp otomatis sesuai bagi tutorial di atas, bisa agak diterapkan bagi platform lainnya sesuai Wordpress. Karena di tutorial ini tidak ada tag khusus Blogger yang digunakan.

Selamat mencoba dengan semoga sukses!

begitulah detil tentang Cara Membuat Tombol Full Screen Landscape Video iFrame di Blogger semoga info ini bermanfaat terima kasih

tulisan ini diposting pada tag , tanggal 27-08-2019, di kutip dari https://www.bungfrangki.com/2019/01/membuat-tombol-fullscreen-video.html