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

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

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2014/10/26 21:37:43
  • 終了:2014/10/27 11:18:21

ベストアンサー

id:adgt No.2

adgt回答回数944ベストアンサー獲得回数662014/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で最適化する方法

id:torimaki

コピペだけで、できてしまったという。助かりました!

2014/10/27 11:17:02
id:adgt

そういって頂けて何よりです!

2014/10/27 21:05:02

その他の回答(2件)

id:duck75 No.1

duck75回答回数78ベストアンサー獲得回数152014/10/26 23:36:40

ポイント39pt

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


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

style="max-width:100%;"

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

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

「bizvektor youtube 貼り付け」

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

id:adgt No.2

adgt回答回数944ベストアンサー獲得回数662014/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で最適化する方法

id:torimaki

コピペだけで、できてしまったという。助かりました!

2014/10/27 11:17:02
id:adgt

そういって頂けて何よりです!

2014/10/27 21:05:02
id:hirorock No.3

hirorock回答回数9ベストアンサー獲得回数02014/10/26 23:51:42

ポイント39pt

ここに貼り付けたいYouTubeのURLを指定すると、WPで投稿可能なHTMLタグを出力してくれますよ。
※投稿する際には、本文投稿の設定を「ビジュアルモード」でなく「テキストモード」で投稿する必要があるかもしれません。

<http://embedresponsively.com/>

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

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

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

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

    2)と3)は、うまく出来ました。
    1)はiPhoneのフレームに収まるものの、
      You Tubeのサムネイルの表示は
      (半分くらいに)途切れてしまう。

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




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

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません