web-dev-qa-db-fra.com

Vidéo responsive Max-width

J'ai trouvé du code qui aidera les intégrations vidéo à réagir: http://alxmedia.se/code/2013/10/make-wordpress-default-video-embeds-responsive/

Le problème n'est pas le code, le code fonctionne très bien! Vous pouvez voir un exemple en direct sur: http://joshrodg.com/hall/ - ceci est en développement, faites défiler vers le bas et regardez les vidéos :-)

Ce que j'aimerais faire est de définir un max-width. Lorsque je définis un max-width sur la div actuelle, la vidéo est coupée et des barres noires apparaissent en haut et en bas. J'adorerais s'il y avait un moyen de définir un max-width tout en préservant les proportions. Les vidéos sont tout simplement trop gigantesques pour rester à 100% de large ... Je pensais plutôt à 600 pixels, mais toujours sur des écrans plus petits pour que tout reste réactif.

Le code actuel que j'utilise a été légèrement modifié par rapport à la source d'origine, je vais donc le poster ici ...

La fonction:

function video_embed( $html ) {
    return '<div class="video-wrap">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'video_embed', 10, 3 );

Le CSS:

.video-wrap {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}

.video-wrap iframe,
.video-wrap object,
.video-wrap embed,
.video-wrap video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

Sortie générée:

<div class="video-wrap">
    <iframe width="500" height="281" src="https://www.youtube.com/embed/hevFL7CiUx4?feature=oembed" frameborder="0" allowfullscreen=""></iframe>
</div>
responsivevideosiframe
1
Josh Rodgers

Donc, apparemment, il me fallait lire un peu plus avant de poster ma question.

Après avoir posté la question, j’ai rencontré: https://moodle.org/mod/forum/discuss.php?d=258650 , ce que j’ai incorporé dans le code que j’utilisais.

J'ai modifié ma fonction pour ressembler à:

function video_embed( $html ) {
    return '<div class="video-container"><div class="video-wrap">' . $html . '</div></div>';
}
add_filter( 'embed_oembed_html', 'video_embed', 10, 3 );

J'ai ajouté le css suivant:

.video-container {
    max-width: 400px;
}

Donc, ce que j’ai fait, c’est d’ajouter un video-container div qui entoure mon video-wrap div, où j’ai spécifié un max-width.

J'ai essayé toutes les largeurs différentes qui fonctionnent maintenant :-)

1
Josh Rodgers