Javascriptレクタングル大TweetPocketYouTube側でも動画のサムネイルはカスタマイズできますが、Webサイトではまた違う画像にしてみたい・・という場合もありますよね。(ない?いえそんな場合もあるはず。)自前のサムネイル画像を用意して、クリックするとYouTubeがオートプレイで再生されるようにしてみました。モバイル対応も考えてデフォルトはミュート、レスポンシブ対応にしています。APIの読み込みYouTube埋め込みといえばiframeで設置しますが、ミュート機能がiframeのオプション項目にないため、javascriptで制御が必要になります。APIを呼び出す下記スクリプトを入力します。;}動画用の枠とサムネイル画像をposition:absoluteで配置します。z-indexでサムネイル画像を動画の上に表示されるように設定。枠のレスポンシブは、横幅は100%として、高さをpaddingで確保します。動画比率16:9の場合、paddingは56.25%になります。3.jQueryでミュート機能・サムネイルクリック後再生を設定jQueryでデバイスがスマホかどうか判定します。true;}YouTubeが読み込まれたら再生を開始します。スマホの場合はmute関数を追加してミュートの状態で再生します。{event.target.mute();}event.target.playVideo();}次に、サムネイルをクリックしたら動画再生を開始する関数です。onPlayerReady,}});//サムネイル非表示$('.thumb').hide();});});.thumbのdata属性を取得して動画IDを代入します。次に埋め込む場所のid名を取得します。$(this).next().attr(‘id’)としてid名を取得しています。YT.Player()で再生方法をオプションを使って設定します。レスポンシブ対応なので、width・heightは100%、関連動画を非表示にするrel=0を設定しました。APIで設定できる他のオプションに関しては下記を参照ください。https://developers.google.com/youtube/iframe_api_reference?hl=ja最後サムネイルをhide()で隠しています。>>>デモサイトはこちらデモサイトの動画は昨年行った沖縄で娘が参加したシーウォークの映像です。※沖縄旅行についてのブログも書いていますので、よかったら合わせてお読みください。夏休み旅行に沖縄「かりゆしビーチリゾート・オーシャンスパ」はおすすめ以思い切って久しぶりに家族で沖縄へ行きました。お手頃価格なのにお手頃な距離感で何でも揃っていておすすめです。...yuri-lifestyle.comまとめスマホを電車の中で見ていて突然お互が出てしまわないようにデフォルトでミュートをかけておくと親切です。サムネイルをクリックしないと再生しないようにすることも、動画再生は容量を多く使うため、外出先での自動再生を避ける方法にもなります。サムネイルを使わずオート再生しないように設定するだけでもいいです。APIオプションやjQueryを使ったりiframeで埋め込むより少し複雑ですが、動画再生は周りに配慮した設計にしたいですよね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。検索:プロフィールこのサイトを運営しているユリです。WordPressのコードを書いています。詳しくはこちら他にコスメなどの情報をまとめた「ユリブログ2」も始めました。ご感想やご意見は、お気軽にお問い合わせフォームまでどうぞ。