bugfix> javascript > 投稿

このWebサイトでビデオヘッダービデオのようなものを再作成しようとしています。 vimeoリンクを使用した高速なロード時間も気に入っています。

ストーリーブランドビデオヘッダー

私は一日中これにいました。これを機能させるためのHTML、JS、およびCSSの適切な組み合わせを見つけることができないようです。私が試したすべての方法は、フルスクリーンであるか、側面に隙間を残しています。また、多くの例は反応しません。助けてください!

HTML

<section id="big-video">
      <div class="video-box">
        <video data-id="2" muted="" autoplay="autoplay" loop="loop">
          <source src="http://player.vimeo.com/external/123432922.hd.mp4? s=dabc3899c0a02b05a3e16a02d0d81758" type="video/mp4">
          <source src="http://player.vimeo.com/external/123432922.hd.mp4?s=dabc3899c0a02b05a3e16a02d0d81758.webm" type="video/webm">
        </video>
     </div>
</section>

CSS

#big-video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

私が使用しようとしたjavascpritはhttps://wordpress.org/plugins/wp-video-lightbox/ 

ありがとう! カイル・H

編集-追加されたコード

回答 1 件
  • vimeo vidを使用している場合、これでうまくいくはずです。ただし、vimeo plusおよびproアカウントのみが、ボタンなしの背景ビデオを許可します。

    Vimeo iframeのsrcには、 background=1 を含めます  および autoplay=1"muted=1" を含む  モバイルデバイスの自動再生を許可します。例えば src="https://player.vimeo.com/video/76979871?background=1&autoplay=1&loop=1&muted=1"

    ビデオの高さの必要に応じて、以下のCSSを調整します。この状況での魔法の弾丸は object-fit だと思う

       <section><div class="header-video" style="opacity: 1;">
            <iframe src="https://player.vimeo.com/video/76979871?background=1&api=1&autoplay=1&loop=1&title=0&byline=0&portrait=0&muted=1&player_id=vvimeoVid" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div></section>
    .header-video {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        opacity: 0;
        overflow: hidden;
    }
    .header-video iframe {
        object-fit: cover;
        object-position: center;
        width: 100%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 0;
        position: absolute;
        /* height based on 1920x1080 ratio */
        height: calc(100vw * 0.5625);
    }
    
    

    ミュート/ミュート解除、再生/一時停止などにカスタムjsを含める場合は、vimeo APIがあります。現在、Vimeo player.js APIにバグがあり、現在iOSでの動画の再生を困難にしていることがわかりました。

    jQuery APIを使用したほうが幸運でした。あなたはここでそれを見つけることができます:https://github.com/jrue/Vimeo-jQuery-API

    CodePenの例

あなたの答え