WordPressの有料テーマ「SWELL」でYouTubeを埋め込む方法を解説していきたいと思います。
今回は2つの方法を説明していきます。
- 直接URLを貼り付ける方法
- 埋め込みコードを使って貼り付ける方法
1番簡単なのは「直接URLを貼り付ける方法」です。
「埋め込みコードを使って貼り付ける方法」は、埋め込みサイズを指定したりカスタマイズできるメリットがあります。
方法1:直接URLを貼り付ける方法
1番簡単な方法です。
Step1:YouTubeのURLを取得する
- 埋め込みたい動画の右下の「共有」をクリックします。
- 「コピー」をクリックしてYouTubeのURLをコピーします。
Step2:ブログにコピーしたURLを貼り付ける
URLをコピーしたら早速WordPressに直接YouTubeを埋め込んでいきましょう!
- Step1でコピーしたYouTubeのURLを直接貼り付けます。
お好きな場所へURLを貼り付けてください。
- URLを貼り付けると以下のようにYouTubeが埋め込まれます。
方法2:埋め込みコードを使って貼り付ける方法
この方法は、コードを変更することで埋め込みサイズを指定したりできます。
Step1:YouTubeの埋め込みコードを取得する
- 埋め込みたい動画の右下の「共有」をクリックします。
- 「埋め込む」をクリックします。
- 動画の埋め込みコードが表示されるので右下の「コピー」をクリックします。
Step2:ブログに埋め込みコードを貼り付ける
埋め込みコードをコピーしたら早速WordPressにYouTubeを埋め込んでいきましょう!
- YouTubeを埋め込みたい所で「+」ボタンをクリックする。
- 検索エリアに「html」と入力すると「カスタムHTML」が表示されるのでクリックします。
- Step1でコピーした埋め込みコードをカスタムHTMLに貼り付けます。
埋め込みコードを貼り付けたら「プレビュー」をクリックするとどんな風に表示されるか確認できます。
貼り付けたYouTubeはこんな感じに表示されます。
埋め込みコードは以下のようになっています。
<iframe width="560" height="315" src="https://www.youtube.com/embed/E8H-67ILaqc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
大きさを変更したい場合は、width=”560″ height=”315″の値を変更します。
YouTubeの幅×高さの比率は16:9が標準となっているので以下のように変更してみてください。
例:width=”800″ height=”450″
動画の表示され方
動画の解像度とアスペクト比
パソコン上での YouTube の標準アスペクト比は 16:9 です。動画のアスペクト比がこれと異なる場合、動画サイズと視聴者のデバイスに合わせてプレーヤーが自動的に最適なサイズに変更されます。
さいごに
YouTubeを埋め込むのも簡単にできるのでぜひやってみてください。
SWELLのブロックに「YouTube」があるのYouTubeの埋め込みができますが、直接URLを貼り付ける方法と同じなのであまり使わないかと思います。
Instagramを埋め込む方法は以下を参考にしてください。
Twitterを埋め込む方法は以下を参考にしてください。
上記でYouTubeを埋め込む方法でカスタムHTMLを呼び出すのにマウスを使った説明をしましたが、キーボード操作だけでカスタムHTMLを呼び出す方法があります。/html
と入力するだけでカスタムHTMLを呼び出せます。
詳しくは以下の記事を参考にしてください。他にも色々ショートカットすることが出来ます。
国内最速のレンタルサーバ【ConoHa WING】
初期費用が無料で月額493円から利用できます。
しかも独自ドメインが2つまで永久無料で利用できます。
分野別に特化ブログを運営することができるのでおすすめです。
<国内最速No.1>高性能レンタルサーバー【ConoHa WING】
ブログを書く前に1度読んでおきたい「新しい文章力の教室」
伝わりやすい文章が書けるようになる基礎を学ぶことができます。文章構成についても学べるので、効率的に作業ができるようになるので時短できます。
Kindle Unlimitedに登録すると無料で30日間、200万冊以上読み放題
「沈黙のWebライティング」は、SEOを意識したライティングや記事タイトルの決め方などWebライティングの基本が分かる1冊になります。
ブログを始めたら一度読んでおくとブログの基本が分かります。