YoutubeやTwitterの、Webサイトやブログ(Word Press)への埋め込みを
スマホ(Android)から行う方法を調べてみた。
なぜそんなことをわざわざ調べたかというと、PCが使えないからだ。
「そんなもんPCでやれば一撃やん」「横着すんなや」という声が聞こえてきそうだが、私だって一日中PCが使えるものならそうしたい。
しかし私のようにこそこそブログを運営する人間にとっては、「スマホですべて完結できる」というポイントはすごく大切なことなのだ。
早速見てみよう。
Youtubeの埋め込み(Word Press)をスマホ(Android)から行う方法
手順① まずは下記URLをコピー
↓下記URLをコピー↓
https://www.youtube.com/
「開く」をタップしてしまうとアプリが起動するため、押したい気持ちをぐっとこらえる。
「コピー」でURLをコピー。
手順② スマホのブラウザへ張り付ける
Androidスマホの場合はChoromeまたはGoogleの検索ウィジェットに先ほどのURLを張り付ける。
すると上記のように、アプリを開くことなくブラウザ上でYoutubeのWeb版を開くことができる。
手順③ 貼り付けたいYoutube動画のURLをコピーする
ブログに張り付けたい動画を見つけたら、URLをコピーする。
ブラウザの上部URLをタップ。
コピーマークをタップすればURLをコピーできる。
手順④ 投稿ページに張り付ける
Word Pressの無料テーマ「Cocoon」や有料テーマ「The Thor」などはYoutubeのURLを張り付けるだけで動画を埋め込むことができる。
(URLの張り付けて動画の埋め込みができないテーマは後述「HTMLで挿入」を確認)
上記のように、先ほどコピーしたURLを記事内に張り付け、記事を更新すれば
自動でレスポンシブなジャスフィットサイズの動画を埋め込んでくれる。
Youtubeの埋め込みに関しては以上。
HTMLで挿入する場合
補足として、URL貼り付けで埋め込みができないテーマの人、またはレスポンシブなんてどうでもいいからHTMLで埋め込みたいよという人
動画右下の「➡共有」ボタンをタップ。
一番左の「<>埋め込む」をタップ。
右下「コピー」でHTMLをコピーできる。
「プレイヤーのコントロールバーを表示する」のチェックを外すと、Youtube動画下の赤いゲージが非表示になり、早送りや巻き戻しができなくなる。
HTMLで埋め込めば任意のタイミングから動画を再生することもできるようだ。
投稿記事内の「<>HTMLを挿入」をタップ。
先ほどのHTMLを張り付ける。
HTMLではただ張り付けただけではレスポンシブになってくれない。
自分でサイズを調整する必要があるので、少し上級者向けかもしれない。
Twitterの埋め込み(Word Press)をスマホ(Android)から行う方法
手順① まずは下記URLをコピー
↓下記URLをコピー↓
https://mobile.twitter.com/
開くを押したくなる気持ちをぐっと我慢して、「コピー」をタップ。
手順② スマホのブラウザへ張り付ける
Androidスマホの場合はChoromeまたはGoogleの検索ウィジェットに先ほどのURLを張り付ける。
手順③ ツイートのHTMLをコピー
すると上記のように、アプリを開くことなくブラウザ上でTwitterのWeb版を開くことができる。
Webサイトやブログへ埋め込みたいツイートの右上「…」をタップ。
「</>ツイートを埋め込む」をタップ。
すると別ページへ飛ばされるので、「Copy Code」をタップ。
コピーすると「コピーしたよ!」と教えてくれるので、そっと閉じてあげる。
手順④ HTMLコードを投稿ページへ埋め込む
投稿ページの「<>HTMLを挿入」をタップ。(ブロックエディタの場合は「<>コード」または「クラシック」で上記タブを表示させる)
手順③でコピーしたHTMLを張り付け。
すると投稿画面上はこのように表示されるが、
3月14日(日)『情熱大陸』
漫才師/和牛
4分間の大会に出ないだけ。
舞台こそ僕らの生きる道。#情熱大陸 #mbs #tbs #和牛 #水田信二 #川西賢志郎 #漫才師 pic.twitter.com/fbh5wknJq5— 情熱大陸 (@jounetsu) March 7, 2021
プレビューはこの通り。投稿ページにTwitterのツイートが埋め込まれる。
あまり大量に埋め込むとページが重くなりSEOにも悪影響なのでほどほどに。
おわり