web-dev-qa-db-ja.com

ネイティブビデオプレーヤーを全幅にする方法

これは私が今持っているものです： enter image description here  /ビデオプレーヤーが水平方向のスペース全体と幅100％を占めるようにします。ビデオはまた、ビデオプレーヤーの領域全体を埋め尽くすように反応し続けるべきです。

この答え でアドバイスを認めず、これを私のfunctions.phpに追加しました：

if ( ! isset( $content_width ) ) {
$content_width = 850; }

私のテンプレートのコンテンツの幅は850ピクセルです。しかし、コンテンツの幅を設定しても意味がありません。

WordPressネイティブビデオプレーヤーの幅を100％にする方法

theme-developmentvideo-player
1
Azamat

これを私のstyle.cssに追加したところ、ビデオプレーヤーは完全にレスポンシブです。

.wp-video, video.wp-video-shortcode, .mejs-container, .mejs-overlay.load {
    width: 100% !important;
    height: 100% !important;
}
.mejs-container {
    padding-top: 56.25%;
}
.wp-video, video.wp-video-shortcode {
    max-width: 100% !important;
}
video.wp-video-shortcode {
    position: relative;
}
.mejs-mediaelement {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.mejs-controls {
    display: none;
}
.mejs-overlay-play {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto !important;
    height: auto !important;
}
3
Azamat