メインコンテンツにスキップ

ドキュメント

ビデオ

表示されたり、ビューポートに入ったりすると動画の再生を開始します。

ビデオコンポーネントは、動画に対して2つの高度な機能を提供します。まず、CSSで非表示になったときに動画を一時停止し、再度表示されたときに再生を再開できます。また、ビューポート外にある場合は動画を一時停止し、ビューポートに入ると再生を開始できます。

次に、YouTubeおよびVimeoの動画をミュートできます。これは、動画をセクションの背景として使用する場合によく必要になります。

たとえば、スライドショー、ライトボックス、カバーの各コンポーネントは、両方の機能を継承して使用します。

使い方

このコンポーネントを適用するには、<video>要素にuk-video属性を追加します。動画はCSSで非表示になったときに一時停止し、再度表示されると再生を再開します。

<video src="" width="" height="" uk-video></video>
  • <button class="uk-button uk-button-default uk-margin" type="button" uk-toggle="target: +">Toggle HTML5 Video</button>

<video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" controls playsinline hidden uk-video></video>

自動再生

動画を再生するための自動再生オプションは2つあります。uk-video属性にautoplayオプションを追加し、次のいずれかの値を適用します。

値 説明
inview ビューポートに入ると動画を再生し、ビューポートから出ると再び一時停止します。
hover マウスが動画にホバーすると動画を再生し、マウスがホバーを離れると再び一時停止します。 
<video src="" width="" height="" uk-video="autoplay: inview"></video>
<video src="" width="" height="" uk-video="autoplay: hover"></video>
  • <div class="uk-child-width-1-2@m" uk-grid>
    <div>

        <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1800" height="1200" loop muted playsinline uk-video="autoplay: inview"></video>

    </div>
    <div>

        <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1800" height="1200" loop muted playsinline uk-video="autoplay: hover"></video>

    </div>
</div>

YouTubeまたはVimeoの自動ミュート

デフォルトでYouTubeまたはVimeoの動画をミュートするには、<iframe>要素にuk-video="automute: true"属性を追加します。

<iframe src="" width="" height="" uk-video="automute: true"></iframe>
  • <button class="uk-button uk-button-default uk-margin-bottom" type="button" uk-toggle="target: +">Toggle YouTube Video</button>

<iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-responsive uk-video="automute: true"></iframe>

コンポーネントオプション

これらのオプションは、コンポーネント属性に適用できます。複数のオプションはセミコロンで区切ります。詳細はこちら

オプション 値 デフォルト 説明
autoplay Boolean, String true 動画はページ上で表示/非表示になると自動的に再生/一時停止します。さらに、動画はビューポート内にあるか、マウスでホバーすると再生できます（inview、hover）。
automute Boolean false YouTubeまたはVimeoの動画を自動的にミュートします。

autoplayはプライマリオプションであり、属性値にこのオプションのみがある場合はキーを省略できます。

JavaScript

JavaScriptコンポーネントの詳細をご覧ください。

初期化

UIkit.video(element, options);