SSブログ
Youtube動画をソネットブログに貼り付ける方法

Youtube動画をソネットブログに貼り付ける方法 [WEB ネット関係]

簡単にできちゃうので試してみてね!!


158A8244_TP_V.jpg



今回は過去記事で新記事を立てると約束した・・・『Youtube動画をソネットブログへ貼り付ける方法』!!

これってぶっちゃけ大勢の皆さんのブログで説明してある手法なので・・・

本記事では手法とコツを簡単に説明する予定だったりして(笑)

そんな感じでいきなり本文にいっちゃおっかーってな感じなのです!!

 



マイクロソフト IE 11(インターネットエキスプローラ 11)の場合

【準備】

ブログにリンクしたいYoutube動画を選ぶ

1_Youtube動画貼り付け.png

【ステップ ①】

動画下の『共有ボタン』を押す

2_Youtube動画貼り付け.png

【ステップ ②】

『埋め込みコード』をクリック

【ステップ ③】

『動画が終わったら関連動画を表示する』のチェックを外す

これは再生後に関連動画が表示されるのがちょいとうざいので外してるけど・・・

これはお好みなので好き好きで(笑)

【ステップ ④】

『560×316』を選択する

私たちのブログ、『むう&ぴょんこの天邪鬼探検隊』と『Japanese Culture Expeditor』とも動画の適正幅サイズは『560ピクセル』なので・・・

これも皆さんのブログサイズに合わせてお好みで(笑)

【ステップ ⑤】

下記のコードが表示されるので・・・


<iframe width="560" height="315" src="https://www.youtube.com/embed/sg3GVj7u8gg?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>


反転したコードをコピーすればコードの取得は完了なのです!!

この後工程、実際にブログに張り付けるフローはChromeの後の章を参照してね!!





Google Chrome(ver 67.0.3396.87)の場合

1_Chrome Youtube動画貼り付け.PNG

【ステップ ①】

動画下の『共有ボタン』を押す

2_Chrome Youtube動画貼り付け.png

【ステップ ②】

『埋め込む』をクリック

3_Chrome Youtube動画貼り付け.PNG

【ステップ ③】

『動画が終わったら関連動画を表示する』のチェックを外す

【ステップ ④】

ここで『コピー』を押すで・・・

本当は動画サイズの設定なんだけど・・・

あれれ・・・これって最初に設定したのだっけ??

なんだかイニシャルでいきなり適合サイズで他に設定ボタンが無い??

なのでもしサイズを変更したい場合はコード内の・・・

<iframe width="560" height="315" src="https://www.youtube.com/embed/sg3GVj7u8gg?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>


『iframe width="560" height="315"』の数値を手打ちすればサイズ変更が可能だぞ!!

もちろん『560』から『640』になど『幅』を変更した場合は・・・

『縦』の『315』も『360』に変更する必要があるので注意してね!!

【ステップ ⑤】

反転したコードは上記コードと同じはずなので、それをマウスの右クリックでコピーして・・・

これからブログへの貼り付け方法を説明しちゃうのです!!





ブログへの張り付け方

ちょいとタイトルが違うのは無視してもらって、具体的な貼り付け方法は・・・

1‗貼り付け.PNG

【ステップ ①】

『<>』ソースコードをクリックして・・・

2_貼り付け.PNG

【ステップ ②】

表示させたい箇所に『Youtube動画のコード』を張り付けて・・・

【ステップ ③】

『OK』を押したら・・・

【ステップ ④】

テキストエディター上に動画が表示される・・・ってわけなのです!!





注意:コード内に『gesture="media"』が入ってたらAMPエラーが出るぞ!!

それで過去記事で『AMP iframe エラー』が出たって言ったよね??

その原因がコード内にあった『gesture』で・・・

今では修正されて『encrypted』になってるので問題なさそうだけど・・・

もし万が一エラーが出たら、『encrypted-media』って手打ちで修正するか・・・

もしくはバッサリ削除しちゃっても全く問題ないはずなので・・・

って、問題が無いかどうかってのは仕様やバージョン、ブラウザなどにもよるので一概には言えないので・・・

とりあえず私のはバッサリ削除で治ったぞってね(笑)




【ブログ作成のコツ】

無料で英語のサイトを自動的に日本語に翻訳する方法

ソネットブログのドメインが変更になるぞってお話し

ソネットブログで常時SSL化を適用させるコツ

過去記事コメントのステータスを後から簡単に変更する方法

Youtube動画をソネットブログに貼り付ける方法

許可されていない属性が HTML タグ「span」にあります

超可愛い 河村友歌さんとブログ構成パーツのご紹介





今回はこれでおしまい!!

正直ね、PCっていろんな仕様があるので、上記で説明したフローでもできない事や、おかしくなることもあるかもね??

なのでクドイけど行う場合はすべて・・・自己責任でお願いしますって事だぞ!!

そんな感じで・・・みなさん、ごきげんよぉーって事なのです!!





Pyonko & Mu From Tokyo でしたぁーっ!!

 

タグ:ブログ
nice!(38)  コメント(4) 
共通テーマ:パソコン・インターネット

nice! 38

コメント 4

真夜中の翼

ありがとうございました。
大変、参考になりました。
by 真夜中の翼 (2020-02-05 19:41) 

むうぴょんこ

真夜中の翼さん・・・参考になってホントに良かった!!
他にもいろいろと・・・
例えばブログのアイキャッチに使用してるフリーモデルさんたちのイメージを入手先アドレスとか・・・
イメージの添付とか、タイトルとか、Googleへの対応とか??
そんな感じのあんまり役には立たない細かいことを記事にしてあるので試してみてねってな感じ(笑)
そうやって真夜中さんの好みのページを作ってもらえたら嬉しいなってすっごく思うのですっ!!
ではではぁーっ!!
by むうぴょんこ (2020-02-06 10:57) 

時の記憶写真本舗

ありがとうございます。早速挑戦してみます。
by 時の記憶写真本舗 (2022-12-22 18:34) 

むうぴょんこ

ふふっ・・・参考になったみたいで良かった!!
これを応用すればいろいろとできる事が広がるので・・・
是非、試してみてね!!

by むうぴょんこ (2022-12-22 20:07) 

コメントを書く

お名前:[必須]
URL:[必須]
コメント:
画像認証:
下の画像に表示されている文字を入力してください。