Vimeoの動画をCodePen経由でQiitaの記事に埋め込んで再生させる方法のメモです。YouTube動画を使うこちらの記事を参考にさせていただきました。
【説明しよう】これがQiitaの投稿に動画(Youtube)を埋め込んで再生させる方法だ。
Vimeo版作成手順
- CodePenに動画再生用のPenを作成
- 再生したい動画をVimeo Player APIを使ってPenに埋め込む
- PenのEditorを開き、フッターのEmbedボタンをクリック
- Embed This Pen画面が開くので、Previewセクション見てレイアウトを調整。drag to resizeバナーを下にドラッグしてコンテナの高さを調整
- Copy & Paste Codeセクションの**HTML(recommended)**タブを開くと埋め込み用HTMLコードが表示されるのでコピー
- Qiitaの記事編集画面にペースト
結果のサンプルはこれです。
See the Pen gOLdwmW by Kazuhiro Hashimoto (@kaz_hashimoto) on CodePen.
プレーヤーのオプション設定については、JSタブ内のJavaScriptを参照してください。
一応、レスポンシブ対応です。画面幅に合わせて動画の幅と高さが調整されます。
上記サンプルではインラインでの自動再生を可能にするため、音声はミュート設定にしました。
１つ欠点が。スマホで見たとき動画の寸法は調整されますが、Penの高さは固定のままなので、動画の下に余白ができてしまいます。コンテナの高さは上記作成手順4で調整した値(px)に固定されるためです。