CocoonにYouTubeの動画を埋め込みたい・・
この記事はWordpressテーマ【Cocoon 】を使っている人に向けて書かれています。
YouTube動画のサイズを変更して埋め込む方法
私はブログを10年以上続けているアラフィフのサラリーマンです。
ブログを中心にアラフォーアラフィフ世代ののお金事情、副業などの発信しています。40代からでも副業で人生を豊かに変える事ができきます！
Cocoonの本文記事にYouTubeの動画を埋め込む方法
Cocoonの記事にYouTubeを埋め込む方法は簡単です。
まずはYouTube動画のURLを取得します。
共有をクリックすると下の画像のようにポップアップが現れます。
赤い四角で囲んだURLが動画のURLです。
これをコピーします。
動画の途中から開始したい場合は青い四角の開始位置にチェックを入れ、開始したい再生時間を指定します。
取得したURLをcocoonの記事に貼り付けます。
この時必ず『テキスト』に切り替えてください。
『ビジュアル』に切り替えて確認します。
この時にURLのままの事がたまにありますが慌てる必要はありません。
URLのままだった場合は、下書き保存するかプレビューにて確認してください。
以上でYouTube動画の埋め込みが完了です。
簡単ですよね。
YouTube動画のサイズを変更して埋め込む方法
次に動画のサイズを変更して埋め込む方法を紹介します。
まずは動画のURLを取得します。
サイズを変更したい場合はURLをコピーするのではなく『埋め込む』をクリックします。
『埋め込む』をクリックすると上の画像のようなポップアップが現れます。
このURLをコピーします。
先ほどと同じように開始位置を指定したい場合はチェックを入れ時間を指定します。
黄色線の部分がサイズになりますので覚えておいてください。
取得したURLをcocoonに貼り付けます。
必ず『テキスト』にしてください。
この時にサイズを変更します。
widthが横、heightが縦のサイズを表しています。
デフォルトではwidth=”560″height=”315″になっていますので今回はわかり易くするためにwidth=”200″height=”100″に変更しました。
『ビジュアル』に切り替えて確認します。
とても小さい動画が埋め込まれています。
以上が動画のサイズ変更をして埋め込む方法です。
これだけ簡単にYouTubeの動画を埋め込むことができるのはcocoonだけだと思います。
動画を埋め込む際の注意点
動画を埋め込むとどうしても読み込み速度が遅くなってしまいますのでユーザビリティが下がってしまいます。
同じ記事内に1つの動画ならそれほど気になりませんが、いくつも動画を埋め込むときにはiframe読み込みは、結構重たいです。
（iframe読み込みとは、サイズ変更で使ったURLの方法です）
複数の動画を1つの記事に埋め込む場合はiframe読み込みは使わずURLを貼り付ける方法を使った方が良いです。
CocoonはURL貼り付けによる動画の埋め込みは高速化処理が自動で行われているので使い分けるのが良いと思います。
コメント