torimaki回答ポイント 178pt

Word Pressのブログに、YouTubeの映像を貼ったのですが。

iPhoneでは、サイズが不釣り合いに大きく表示されてしまいます。
それ用に表示させるには、どのようにすれば良いのでしょうか。
http://tsurumaki-office.com/2014/10/20/owarino_kisetsu/

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

ベストアンサー

adgt2014/10/26 23:39:02
満足100pt
埋め込みコードの大きさをhtmlやcssで設定していく方法が一般的なようです。
```
<div class="v-wrap al-c m30-b">動画の埋め込みコード</div>
```
というコードで、動画の埋め込みコードを挟みます。
・・・
※Wordpressでブログを構築されている場合、プラグインに『wp touch』を入れている場合、上手く表示されない場合があります。
YOUTUBE動画を埋め込む方法とスマホ動画サイズを最適化する方法 | メルマガアフィリエイトとDRMを武器に稼ぐ永田武（たけやん）のブログ
貼り付けたいコードを
```
<div class="video-container"></div>
```
で囲みます。CSSに以下のように記述します。
```
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
```
これだけです
埋め込んだYouTubeなどの動画をスマホ用にCSSで最適化する方法
スター
- 2件のコメントを見る
- torimaki 2014/10/27 11:17:02
  
  コピペだけで、できてしまったという。助かりました！
  
  スター
- adgt 2014/10/27 21:05:02
  
  そういって頂けて何よりです！
  
  スター

その他の回答

duck752014/10/26 23:36:40
満足39pt

YouTube動画をページサイズに合わせて自動調整して埋め込むには | どらまちっくー…ばーすとぉ！

↑
この記事によると、YouTube埋め込みのiframeタグに

style="max-width:100%;"

というスタイルを追加してやればいいっぽいです。

やり方は他にもたくさんググったら出てきます。

「bizvektor youtube 貼り付け」

などでググったらいいのではないでしょうか。

スター

その他の回答を読む

この質問へのコメント

torimaki2014/10/27 11:15:46

皆様、ご回答、ありがとうございます。

１）埋め込みタグにスタイルを追加する方法、
２）HTMLとCSSで設定する方法、
３）レスポンシブ対応のタグに変換されるサービスを利用する方法、

すべて試させていただきました。

結果は、こんな感じでした。

２）と３）は、うまく出来ました。
１）はiPhoneのフレームに収まるものの、
　　You Tubeのサムネイルの表示は
　　（半分くらいに）途切れてしまう。

にしださんの「bizvektor youtube 貼り付け」でググるという方法、
これ、思いつきませんでした。参考になりました！

この質問への反応（ブックマークコメント）

質問の情報

登録日時: 2014-10-26 21:37:43
終了日時: 2014-10-27 11:18:21
回答条件: 1人1回まで

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問