ブログ初心者でも簡単にできました!「YouTube動画」をブログ記事に埋め込む方法

WordPress

今回の記録は「YouTube動画をブログ記事に埋め込む方法の記録です。ブログを始めてから見易いブログやデザインの勉強のために色々なページを見るようになりましたが、動画の埋め込みは先に記録した「画面スクロール動画を埋め込む方法」と、今回記録する「YouTube動画を埋め込む方法(2パターン)」の2つの方法くらいを最初に覚えておけば記事の表現の幅も広がるので良いかなと思います。

YouTube動画をリンクを使って埋め込む方法
(難易度:☆☆☆☆★)

YouTube動画をリンクを使ってサイトやブログに埋め込みます。この方法はWordPressのテーマによって使えないこともあるので各テーマによって使い分けると良いかと思います。

① YouTubeの再生画面にある『共有』ボタンをクリック

② 画面中央に表示されたリンクをコピー

③ ブログやサイトの動画リンク、YouTubeなどの機能を使って動画を埋め込む

Cocoonのブロックエディタは「/」でメニューを呼び出すと『YouTube』の項目があるのでこれを使います。

YouTubeの項目を選択し先ほどコピーしたリンクURLを貼り付けてから埋め込みボタンをクリックすればOKです。

リンクURLを使って動画を埋め込むことができました!

リンクURLを使って動画を埋め込むことができたのですが…

モバイルとタブレットは埋め込み動画で表示されるのですが、

Webサイトにすると赤枠のようにリンクカードで表示されます。リンクからYouTubeに移動すればもちろん動画は見れるのですが少し不便を感じるのでもうひとつの方法を使います。

YouTube動画をコードを使ってサイトやブログに埋め込む方法
(難易度:☆☆☆☆★)

「コード」とか言葉が出てくるといかにも専門的で難しいのでは?と感じてしまうかもしれませんが安心して下さい!ブログ初心者の私でも難なくできました!コードはYouTubeが生成してくれるので生成されたコードをサイトやブログに貼り付けるだけです。貼り付ける場所(エディター)だけ間違えなければOKです。

① YouTubeの再生画面にある『共有』ボタンをクリック

② 画面の真ん中に共有メディアが表示されるので『埋め込む』を選択

③ 『埋め込む』を選択すると画面に別タブが開き埋め込みコードが表示される

画像赤枠のコードが埋め込みコードになります。このコードをコピーしてサイトやブログに動画を埋め込んでいきます。

コードエディターを使う

ここさえ間違えなければ簡単です!YouTubeで生成した埋め込みコードを貼り付ける場所はコードエディターで貼り付けます。普段はビジュアルエディターでブログ作成される方が多いと思いますので注意して下さい。Cocoon(ブロックエディター)の場合を記録しておきます。

画像右上の縦に並んでる点々からメニューを開き

エディターの項目でコードエディターに変更します

コードエディターにすると英語がいっぱい出てきます!初心者がこの英語を闇雲に触ったり間違って消したりしてしまうと不具合が起きるので触らないように気をつけます。エディターを変える前に下書き保存をしておくと良いかもしれません。

コードエディターに変更して動画を埋め込みたいところに埋め込みコードを貼り付ければ完了です。また画像の青枠内赤線部分width=“560” height=“315”は表示する動画の高さと横幅なので数字を変えると高さと横幅が変わります。

動画の埋め込みに成功しました!(この動画はwidth=“854” height=“480”に調整してあります。)

まとめ:動画を埋め込んで表現の幅がまた少し広がった気がします!

今回は「ブログに動画の埋め込みをしてみましたpart2」と題してYouTube動画の埋め込みについて記録しました。サイトやブログに動画を表示することができるようになるとまた少し表現の幅が広がり内容がユーザーにより伝わるページを作っていけるとようになると思います!でも最近いろんなページを見てて思うのはやたら動画、やたら画像、やたら広告なページが増えてきているような気がします。あと表示速度が遅かったりすぐに他のSNSに誘導しようとしたり。まだまだ初心者ですがそういうのはユーザーにとって見難いコンテンツなのは少しわかるので少しづつ勉強して見やすく誰かの役に立てるブログを作っていこうと思います!

WordPress
シェアする
mato.netをフォローする