全画面背景動画
画面サイズによって比率を守って、幅/高さいっぱいを計算する。CSSはfixedで中央に。
export default class Hoge {
constructor() {
this.video = document.querySelector('.video')
const height = 1366
const width = 768
// 動画比率
this.baseVideoRatio = height/width
this.heightRatio = width/height
this.init()
}
init() {
this.setVideoSize()
window.addEventListener('resize', this.setVideoSize.bind(this))
}
setVideoSize() {
// 現在比率
let currentRatio = window.innerWidth / window.innerHeight
// 幅 : 100%
// 高さ : 比率を守って計算する
if (this.baseVideoRatio < currentRatio) {
const videoWidth = window.innerWidth
const videoHeight = videoWidth * this.heightRatio
TweenMax.set(this.video, { css: { 'height': `${videoHeight}px`, 'width': `${videoWidth}px` } })
} else if (this.baseVideoRatio >= currentRatio) {
// 高さ : 100%
// 幅 : 比率を守って計算する
const videoHeight = window.innerHeight
const videoWidth = videoHeight * this.baseVideoRatio
TweenMax.set(this.video, { css: { 'height': `${videoHeight}px`, 'width': `${videoWidth}px` } })
}
}
}