Magnific PopupでYouTubeが再生されない
Magnific Popup は、
レスポンシブデザインにも対応しているモーダルウィンドウ用jQueryプラグインです。
Magnific PopupでYouTubeの動画をポップアップ表示するページを作っていたのですが、
YouTubeの動画がうまく再生されないというトラブルがあったのでそれについてメモ。
トラブルの内容
- Magnific PopupでYouTubeをポップアップ表示する
- 表示させるのはYouTubeの限定公開の動画
- ポップアップは開くものの、再生ボタンを押すと「エラーが発生しました。しばらくしてからもう一度お試しください。」のエラー文が表示され動画が再生されず。
- YouTubeで公開されている、動画のiframeのタグを使用しての表示は可能 → 限定公開の動画であることが原因ではなさそう
解決
ポップアップで表示する動画のURLは、
お客様から送られてきたURLをそのまま使用していました。
(トラブル防止のため、送られて来たものをまるっとコピペです)
ただ、YouTubeのその動画のページを見た際に、
そのページで表示されるiframeに記載しているURLと、
ポップアップ用に記載したURL(お客様から送られてきたURL)に差異があることに気づきました。
記述したURLには
「&feature=youtu.be」というパラメータの表記があり
これを削除することで、正常にポップアップ表示からの再生ができるようになりました。(動画はもちろん限定公開のまま)
このパロメータが何の意味を指すのか調べても分からなかったのですが、
限定公開の動画でも無事に表示・再生できてよかったです。
みなさんもパロメータにはお気をつけあれ。。。