サポート » 使い方全般 » ユーチューブ動画の埋め込みについて

  • 解決済 marikodesigner

    (@marikodesigner)


    上記質問させて頂きます。

    今現在、ユーチューブ動画をサイトに埋め込みしてますが、デスクトップの時は画面幅いっぱいにきちんと表示されてるのですが、モバイルの時にうまく表示されてません。※再生すると画面内で表示されますが、再生前が、大きく表示されていて、再生ボタンなども見えません。

    ユーチューブ動画の大きさは、サイトの画面幅いっぱいのサイズ1150ピクセルに設定してます。もちろん幅はユーチューブ動画の比率に合わせてます。

    で、カスタムcssに以下の記述をすればとのことでやったのですが、改善されません。
    アドバイスをお願いします。

    .video {
    height: 0;
    overfow: hidden;
    position: relative;
    padding-bottom: 56.25%;
    }
    .video iframe {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    }

    ヘルプの必要なページ: [リンクを見るにはログイン]

14件の返信を表示中 - 1 - 14件目 (全14件中)
  • こんにちは

    下記スタイルをテーマの style.css またはカスタマイズの [追加 CSS] に追記してみてください。

    embed,
    iframe,
    object {
    	max-width: 100%;
    }
    スレッド開始 marikodesigner

    (@marikodesigner)

    早速のご連絡ありがとうございます!

    ユーチューブの枠は、モバイルの枠に合うようになりましたが、
    縦に長く見る場合、幅はあってるのですが、中の画像がはみ出てしまいます。

    どうしたらよいでしょうか?

    CG

    (@du-bist-der-lenz)

    モバイルを横向きでの場合は考慮しないのですか

    スレッド開始 marikodesigner

    (@marikodesigner)

    横向きでも、縦向きでも、画面に合わせて表示されるようにしたいです。

    CG

    (@du-bist-der-lenz)

    メディアクエリを当てたり、PCとモバイルで出し分けることになるでしょう。

    埋め込みコードを <div class="video-container"></div> でラップして、下記スタイルを記述する方法はどうでしょうか?

    .video-container {
    	position: relative;
    	padding-bottom: 56.25%;
    	height: 0;
    	overflow: hidden;
    }
     
    .video-container iframe,  
    .video-container object,  
    .video-container embed {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }

    自動でラップさせるには、下記のようなコードを functions.php に追加するといいかと思います。

    function my_youtube_embed_oembed_html( $html ){
    	if ( strpos( $html, 'youtu.be' ) !== false || strpos( $html, 'youtube.com' ) !== false) {
    		$html = '<div class="video-container">' . $html . '</div>';
    	}
    	return $html;
    }
    
    add_filter( 'embed_oembed_html', 'my_youtube_embed_oembed_html');
    スレッド開始 marikodesigner

    (@marikodesigner)

    ご回答ありがとうございます。返信が遅れてしまい、すみませんでした。
    まだトライしてませんが、
    このラップをする際も、以前教えて頂きましたCSSの記述
    .video {
    height: 0;
    overfow: hidden;
    position: relative;
    padding-bottom: 56.25%;
    }
    .video iframe {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    }
    embed,
    iframe,
    object {
    max-width: 100%;
    }
    を残したままにするのでしょうか?
    教えてください。

    CG

    (@du-bist-der-lenz)

    記述したコードは最後に読み込まれるものが、先に読み込んでいるものを上書きします。表示の処理作業がその分、時間がかかるだけです。

    残したままにするのでしょうか?

    必要ありません。前レスで完結しています。

    • この返信は2年、 7ヶ月前にishitakaが編集しました。
    スレッド開始 marikodesigner

    (@marikodesigner)

    かしこまりました!早速トライしてみます!!

    スレッド開始 marikodesigner

    (@marikodesigner)

    参考にトライさせて頂きましたところ、

    iframe{ width: 100%; height:auto; }

    これをCSS に埋め込んだところ、モバイルやデスクトップにレスポンシブに画面が合うようになりました。

    ご回答、アドバイス頂きましたこと通りではないのですが、解決しましたこと報告申し上げます。

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

    iframe{ width: 100%; height:auto; }

    これだけでは、デバイスのサイズによては、はみ出す場合もあると思いますが・・・
    様々なデバイスで確認されるといいかと思います。

    余計なお節介なので問題ないということであれば無視してください・・・

    CG

    (@du-bist-der-lenz)

    デバイスの画面表示サイズは千変万化。スマホの縦向きだと、横幅で合わせると、動画は小さく表示されるし、上下に間ができることもある。きりが有りませんよ。

    ブラウザの幅を変更して確認することもできます。

14件の返信を表示中 - 1 - 14件目 (全14件中)
  • トピック「ユーチューブ動画の埋め込みについて」には新たに返信することはできません。