2023.10.18
androidでslick中に埋め込んだYouTubeを全画面表示した時の表示バグ
はじめに
少しニッチなパターンですが、androidでslick中に埋め込んだYouTubeを全画面表示した時に起きた表示バグの暫定的な対応の備忘録です。
なぜ表示バグが起きたのか
androidの場合、iframe内のYouTubeを全画面表示した時、自動的にデバイスの向きが横向きに切り替わります。
その際にslickのスライダー処理と干渉して全画面表示自体が中断されてしまいました。
暫定的な対応
弊社では、「androidの横向きpx数がおおむねカバーできるタイミングでslickスライダーを解除する」で落ち着きました。
slickのjQuery記述サンプルは下記となります。
$('★スライダーclass名★').slick({
autoplay: false,
speed: 400,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 900, // windowサイズが900px以下で
settings: 'unslick' // slickを解除
},
],
infinite: false,
arrows: true,
dots: true,
pauseOnHover: false,
});
$(window).on('resize orientationchange', function() {
$('★スライダーclass名★').slick('resize');
});少しニッチなパターンで再現された表示バグでしたが、上記の対応で問題が解決されました。