質問: お世話になります。 現在、Youtubeの動画を背景画像として実装しようとトライしていて、 以下のようにコードを書いています。 【HTML】 ``` ``` 【CSS】 ``` .mainVideo { margin-top: 10px; width: 100%; position: relative; } .mainVideo a { width: 100%; height: auto; position: relative; display: inline-block; } .mainVideo a img.bg { position: relative; width: 100%; height: auto; top: 0; left: 0; } .mainVideo a img.play { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } ``` Youtubeの再生ボタンを押すと、その場で再生するようにしたいのですが、 どうしてもYoutubeサイトに飛んでしまいます。 その場で再生する方法がわかりません。 もし何かお分かりの方がいらっしゃいましたら、ぜひご教授ください。 どうぞよろしくお願い申し上げます。
回答: その後、YouTube Player APIを使って実装しようと試しましたが、 力不足で思った動きを実装できなかったので、CSSでいろいろ模索しましたところ、 CSSとポップアップで希望の動きを実装することができました。 ただ、APIを使う方法は知らなかったので、大変勉強になりました。 参考サイトのようなJSを理解できるように、勉強に精進していきます。 NatsumiOki様、kei344様、この度はアドバイスいただきありがとうございました。 ちなみに、解決した方法ですが、 http://blog.shuffleee.com/2642/ 上記のサイトを参考にしました。 実装したかった内容としては、まず動画の初期表示画像をサムネイルにして、サムネイルクリックで 動画を画面いっぱいに表示させる+クローズボタンも実装する、という内容です。 Magnific Popupはレスポンシブにも対応しているようだったので、大変助かりました。