web-dev-qa-db-fra.com

Comment rendre le lecteur vidéo natif pleine largeur?

C'est ce que j'ai maintenant:  enter image description here  Je souhaite que le lecteur vidéo occupe tout l’espace horizontal et s’étire à 100%. La vidéo doit également rester sensible, remplissant toute la zone du lecteur vidéo.

J'ai suivi le conseil dans cette réponse et l'a ajouté à mon functions.php:

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

La largeur du contenu de mon modèle est de 850 pixels. Mais régler la largeur du contenu n'a pas aidé.

Comment faire du lecteur vidéo natif WordPress une largeur de 100%?

theme-developmentvideo-player
1
Azamat

J'ai ajouté ceci à mon style.css et maintenant le lecteur vidéo est totalement réactif!

.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