VWSとは フォーラム Lightning [ 解決済 ] ランディングページにYouTube

このトピックには5件の返信が含まれ、3人の参加者がいます。1 日、 5 時間前 RICK さんが最後の更新を行いました。

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #15916

    ランディングページにYouTubeを貼り付けると、片方に寄ってしまいサイドバー部分が空白になります。フルサイズ、もしくは任意サイズでセンター寄せにしたいのですがお知恵拝借できれば幸いです。

    #15917

    RICK
    参加者

    私は下記の様にしてYouTubeの動画を貼り付けています。
    ちなみに、カラム内フルサイズです。

    HTML

    <div class="movie-wrap">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/Q2CXPPPjC8k" frameborder="0" allowfullscreen></iframe>
    </div>

    CSS

    .movie-wrap {
    	position: relative;
    	padding-bottom: 56.25%;
    	padding-top: 30px;
    	height: 0;
    	overflow: hidden;
    }
    
    .movie-wrap iframe {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }
    #15922

    kurudrive
    参加者

    <iframe width="560" height="315" src="https://www.youtube.com/embed/Q2CXPPPjC8k" frameborder="0" allowfullscreen></iframe>

    widthhとheightを大きめにしておけば、自動的にサイズを縮小してくれないですかね?

    #15941

    RICK
    参加者

    iframeは親要素の幅を無視して表示されるので、
    レスポンシブにするには上記のようなCSSを組むか、
    JSで対応するかしかないようです。

    ちなみにvimeoでは貼り付けタグにもれなくレスポンシブ用のJSがついてくるようでした。

    #15955

    kurudrive
    参加者

    あ、えーっとですね、実はLightning側にYouTube、GoogleMap、vimeo の iframeをレスポンシブで良きに計らうjsがついているので、表示領域よりも大きい width を設定するとたぶん大丈夫だと思います。

    ※URLだけ貼り付ける上記jsっは動作しません。HTMLブロックでiframeタグを入力してください。

    #15956

    RICK
    参加者

    ああ、そういうことでしたか。勘違いしてすみません。

6件の投稿を表示中 - 1 - 6件目 (全6件中)

このトピックに返信するにはログインが必要です。