表示されたり、ビューポートに入ったりすると動画の再生を開始します。
ビデオコンポーネントは、動画に対して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の動画をミュートするには、<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&showinfo=0&rel=0&modestbranding=1&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コンポーネントの詳細をご覧ください。
UIkit.video(element, options);