2016/01/31

youtubeの埋め込み動画スマホ(iphone)サイズ最適化する方法

 

この記事を書いている人 - WRITER -
さいたま市1975年生まれの男性です。ブログを書いて生活しています。ブログは40個あって、いろいろテストしています。ひとの役に立つブログをかけるように日々勉強しています。よろしくお願いします。

youtubeの埋め込み動画スマホ(iphone)サイズ最適化する方法をご紹介します。youtubeの動画って、ワードプレスブログに直接、共有コードや、URLをコピペしただけで、埋め込み出来てパソコンで見る分には、こんな感じで、問題なく見えるんです。

ただ、これがiPhoneから、見るときに、旧世代のiPhoneの幅が300ピクセル相当ぐらいなので、はみ出てしまうんですね。これを自動的に調節するための方法をご紹介します。

ユーチューブ動画をスマホ最適化する方法動画

記事の書き方その7

●youtubeより大きいフルサイズの動画で見る場合はこちらをクリック
↓↓↓
Youtubeの動画をブログに埋め込んだのをiphoneで見てもokにする方法

ユーチューブ動画をスマホ最適化する方法

youtubeから引っ張ってきた共有コードを一回範囲指定して反転させて、それでテキストエディターのボタンの”v-wrap”っていうボタンを押してください。

注意:v-wrapボタンは、add-quick-tag というプラグインで、自分で作る必要があります。まだ、作ってない人は、こちの記事を参考にして、作ってくださいね。

addquicktagの使いかた

そうすると、 v-wrap  div っていうタグで囲まれます。共有コードをこのv-wrapっていうボタンを押して、挟んでいただくっていう感じですね。一回v-wrapで閉じる。で、divで始まってdivで/で閉じるっていう感じでやっていただくと、これでキレイに動画が貼り付けられます。

これでまた、下書きしていただいて保存してください。

こうすると、パソコンで見てる分には同じなんですけども、iPhoneで見たときにこう自動的に小さくなります。レスポンシブとかっていい方をしたりしますね。

ブログの画面で、動画の縦横比や大きさが違うのは、You Tubeの元々の動画のサイズが違うことがあるので、そのへんでちょっと変わってくるので、この辺は気にしなくて大丈夫です。

こんな感じでコードを貼り付けていただいて、下書き保存でYou Yubeの動画が貼り付けられますので、まぁ試しにいくつかやってみてくださいね。

動画を検索して、「この動画、まぁまぁ面白そうじゃん」っていう動画があったら、共有ボタンの埋め込みコードを切り取ってドン、ドン共有してください。

てな感じでYou Tubeの貼り付け方ご紹介でした。またわかんないところがあったらご質問ください。よろしくお願いします。

お疲れ様でした。ぜひチャレンジしてやってみてくださいね。

元の記事に戻る
↓↓↓
外部ライター様。ブログ記事ライティングの仕様お願い

Similar Posts:

この記事を書いている人 - WRITER -
さいたま市1975年生まれの男性です。ブログを書いて生活しています。ブログは40個あって、いろいろテストしています。ひとの役に立つブログをかけるように日々勉強しています。よろしくお願いします。
 

Copyright© 藤田マリオのネットビジネス , 2015 All Rights Reserved.