youtubeがopacity:0 では押せなくなっている
よくある使い方として、
youtubeをopacity:0 で隠しておいて、画像なりを敷いておき
そこをclickしたら、youtubeのモーダルが再生する
みたいな仕様はあるあるだと思う。
これは何が良いかというと、PCはapi使えばyoutubeの挙動を外部から制御出来るのだが、
SPは動画再生のためにユーザーが一度youtubeをclickする
というアクションをする必要があるためである。
この挙動にしておけば、PCでもSPでも共通の仕様でモーダル動画が再生出来るので、
レスポンシブなどで重宝する。
しかし、いつからか、実装したyoutubeをclickしても
再生されない、というか透明のyoutubeが反応しない？？
自体に遭遇した。どこを調べても書いてないんですよね。。
多分、「youtubeを透明にして、ユーザーを騙してclickさせて再生」
みたいなことをyoutube側で禁止にしたのではないかと勝手に予想。
苦肉の策として、
「opacity → 0」をやめて「opaity → 0.0001」のような
限りなく小さい値に変更したら従来の挙動で動いた。
demoを作りました。
reactでごにょごにょ書いてますが
大事な箇所は16行目の
opacity: ${props => (props.show ? 1 : props.minOpacity)};
の部分です。opacityの最小値を切り替えてます。
youtubeが動かないと思ったら、opacityの値を疑ってみてください。
