LPの背景に動画を入れたい

Question

お世話になっております。

無料テンプレを参考に、素人なりに楽天用のLPを作成しているのですが、
https://codepen.io/recooord/pen/Gxbxoy
のように背景画像を動画に変更して横幅いっぱいで固定させたいです。
動画のurlはこちら↓です。
https://www.rakuten.ne.jp/gold/sunrise-shoes/sun_lp/sun_lp/img/sun_image30sec.mp4

また、下部のコンテンツを2段にしたいです。
作成中のLPはこちら↓です。
https://www.rakuten.ne.jp/gold/sunrise-shoes/sun_lp/sun_lp/index.html

お忙しい中恐縮ですが、どうすれば良いのか教えていただけますでしょうか？###HR######IMG0a777052f7424ba5be8267db0167cac65.jpegIMG0###

Accepted Answer

ECマスターズの北原です。

>背景の動画はPCだと表示されるようになりましたが、スマホだと背景が白くなっています。

お調べしたところ、楽天GOLDでは
スマホでビデオタグでの動画の再生ができない仕様となっているようです。

楽天GOLDのスマホページで動画を再生する方法として
楽天R-cabinetに動画をアップロードしていただき、
貼り付け用HTMLソースを楽天GOLDのページに貼り付けることで
動画を表示させる事が可能となります。

https://ec-masters.gyazo.com/d6267910f6a72be4151d0dc70a3b7f2c

下記HTMLのようにしていただくと、横幅を100%で指定する事ができます。

は動画の埋め込みHTMLです。


        
    
    
        .video-contents>div {
            width: 100% !important;
        }
    

しかし、楽天R-cabinetを使った方法では以下の問題がございます。

・元の動画より解像度が下がってしまう。
・高さの%指定ができない。
・ループ再生ができない。
・動画サイズによって縦・横に黒い幅ができてしまう。
・コントロールバーが出てしまう。

様々な方法を試しましたが、現状これらを解消する事ができませんでした。

また、youtubeなどの外部システムの動画アップロードして、
埋め込む方法は、外部リンクになってしまうため、
楽天の規約違反となってしまいます。

現状のお勧めとしましては、
PC画面サイズの時はvideoタグで動画を表示し、
SP画面サイズの時はR -cabinetの動画を表示する、
もしくは、横幅いっぱいの画像を表示する
となります。

>また、商品一覧については確かに2段となりましたが、スライダーが無くなってしまいました。

今回使っているスライダーは





という構造となっておりタグが一つのブロックとしてスライドされます。

私が提示したHTMLは一つのタグの中身を
例として挙げさせていただきました。

そのため、私のHTMLを全て貼り付けても一つのブロックしかなく、
スライドとなりません。
わかりづらい回答で申し訳ございません。

変更前のHTMLに戻していただき














...以下が続きます



となっていたものを



















...以下が続きます


とすることで2段のスライドブロックを作る事ができるかと思います。
お試しくださいませ。

Answer

ECマスターズの北原です。

>背景画像を動画に変更して横幅いっぱいで固定させたいです。

タグの前にこちらのhtmlを記入してください。
動画が背景に固定されるかと思います。


    .video-content {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
    }



  


現在使われているヘッダー画像は、削除またはコメントアウトしてください。

.hero {
/* このようにコメントアウトまたは削除してください。 */
    /* background: url(../img/hero-bg2.jpg) no-repeat center center; */

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 65px 0 300px 0;
    height: 800px;
}

また、背景色が透過設定されている場所があり、
背景の動画と重なり文字が読みづらくなってしまいます。
背景色の透過をなくす、または文字色を白色などに適時変更してください。

.fluid-white {
    width: 50%;
    float: right;
    height: 100%;
    z-index: -1;
    background: rgba(231, 231, 235, 0.2); /* 透過された背景色 */
}

>下部のコンテンツを2段にしたいです。

こちらのようにタグの中を増やすのはいかがでしょうか。



                                
                                    
                                        
                                            
                                            
                                                View More
                                                x
                                            
                                        
                                    

                                    SUN 503 WHITE -unisex-
                                    made in japan
                                    size: [3E]22.5/23.0/23.5/24.0/24.5
                                        [2E]25.0/25.5/26.0/26.5/27.0/27.5/28.0
                                        fabric: 綿 / sole: ゴム底
                                        ¥5,500[tax included]
                                    
                                
                                
                                    
                                        
                                            
                                            
                                                View More
                                                x
                                            
                                        
                                    

                                    SUN 503 BLACK -unisex-
                                    made in japan
                                    size: [3E]22.5/23.0/23.5/24.0/24.5
                                        [2E]25.0/25.5/26.0/26.5/27.0/27.5/28.0
                                        fabric: 綿 / sole: ゴム底
                                        ¥5,500[tax included]
                                    
                                
                                
                                    
                                        
                                            
                                            
                                                View More
                                                x
                                            
                                        
                                    

                                    SUN 504 WHITE -unisex-
                                    made in japan
                                    size: [3E]22.5/23.0/23.5/24.0/24.5
                                        [2E]25.0/25.5/26.0/26.5/27.0/27.5/28.0
                                        fabric: 綿 / sole: ゴム底
                                        ¥6,600[tax included]
                                    
                                

                                    
                                        
                                            
                                            
                                                View More
                                                x
                                            
                                        
                                    

                                    SUN 503 WHITE -unisex-
                                    made in japan
                                    size: [3E]22.5/23.0/23.5/24.0/24.5
                                        [2E]25.0/25.5/26.0/26.5/27.0/27.5/28.0
                                        fabric: 綿 / sole: ゴム底
                                        ¥5,500[tax included]
                                    
                                
                                
                                    
                                        
                                            
                                            
                                                View More
                                                x
                                            
                                        
                                    

                                    SUN 503 BLACK -unisex-
                                    made in japan
                                    size: [3E]22.5/23.0/23.5/24.0/24.5
                                        [2E]25.0/25.5/26.0/26.5/27.0/27.5/28.0
                                        fabric: 綿 / sole: ゴム底
                                        ¥5,500[tax included]
                                    
                                
                                
                                    
                                        
                                            
                                            
                                                View More
                                                x
                                            
                                        
                                    

                                    SUN 504 WHITE -unisex-
                                    made in japan
                                    size: [3E]22.5/23.0/23.5/24.0/24.5
                                        [2E]25.0/25.5/26.0/26.5/27.0/27.5/28.0
                                        fabric: 綿 / sole: ゴム底
                                        ¥6,600[tax included]
                                    
                                
                            

bootstrapのrow・colは横一列を１２分割して並べます。
col-md-4ならば３つまでのブロックを横一列で表示でき、
3つ以上の場合は2段目に表示されます。

詳しくはこちらの記事をご参考くださいませ。
https://websae.net/twitter-bootstrap-grid-system-21060224/

わかりづらい事があればお気軽にご質問ください。

Answer

ECマスターズ　北原様

ご返信遅くなり申し訳ございません。
ご丁寧に教えていただき、ありがとうございます。

背景の動画はPCだと表示されるようになりましたが、スマホだと背景が白くなっています。
また、商品一覧については確かに2段となりましたが、スライダーが無くなってしまいました。
コンテナ自体をコピーすると1つ目はきちんとスライダーになりますが、
2つ目はサムネイルが全て表示されてしまってうまくいきません。
何度もすみません、原因がわかりましたら教えてください。

Answer

ECマスターズ　北原様

ご返信いただき、ありがとうございます。
動画についてはどうするか検討いたします。

商品一覧の部分はスライドで表示されるようになったのですが、
スマホだと見辛くなってしまったので、一旦どうするか検討いたします。

ありがとうございました。

Answer

ECマスターズ　北原様

お世話になっております。
商品一覧はアイテムが多かったので品種でまとめることにしました。
スライドをやめて商品を全て表示し、スマホは縦に1個ずつ表示したいと思います。

1行目はきちんとスマホで縦に並びましたが、2行目がスマホよりも画像が横に拡大されてしまっています。
どうすれば上と同じサイズで縦に並びますでしょうか？

Answer

ECマスターズの北原です。

>1行目はきちんとスマホで縦に並びましたが、2行目がスマホよりも画像が横に拡大されてしまっています。
>どうすれば上と同じサイズで縦に並びますでしょうか？

二行目には下記HTMLのように

と横幅を1170pxで指定するスタイルが入っております。

こちらのスタイルを削除していただくことで
改善されるかと思います。

該当HTML

             
              
                
                  ←こちらの部分です

...以下HTMLが続きます。

Answer

ECマスターズ　北原様

スタイルを削除したところ、きちんとレスポンシブで表示されるようになりました！
ありがとうございます。

Answer

ECマスターズ　北原様

何度もすみません。
SUN Product Typeというテキスト部分の背景画像と
SHOP TOPというテキストの背景画像のスマホ表示についてなのですが、
スマホもPCと同じように背景を固定したいのですが、
iphoneでも背景を固定させるにはどうすればよいでしょうか？
また、iphoneのクロームで見ると一部がぼんやり表示されてしまうので、
幅を100%で表示させたいです。

Answer

ECマスターズの北原です。

>スマホもPCと同じように背景を固定したいのですが、
>iphoneでも背景を固定させるにはどうすればよいでしょうか？

画像を使っているCSSの『background-attachment: fiexd』は
IOSのsafari・Chromeでは、現状対応しておりません。

.swag {
background: url('../img/sunitem-bg.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed; ←こちらが対応していません
padding: 50px 0;
}

『background-attachment: scroll;』に変更することで
固定はされませんが、背景画像が正しく表示されるかと思います。

IOSでも背景画像を固定する場合は、
『background-attachment: fiexd』を使わない方法で、
HTMLを大幅に修正する必要があるかと思います。

詳しくはこちらの記事をご参考ください。
https://itokoba.com/archives/2375

Answer

ECマスターズ　北原様

返信ありがとうございます。
また、とても参考になる記事、ありがとうございます。

スマホの場合は一旦固定しないものにしたいと思います。
ありがとうございました。