web-dev-qa-db-fra.com

oIntégrer le rapport d'aspect de la vidéo YouTube

Lorsque j'insère une vidéo YouTube dans mon message en mettant simplement le lien ( http://youtu.be/KvtkknNawCQ ). Le rapport d'aspect vidéo devient 4: 3. Comment puis-je passer à 16: 9?

youtubeoembed
1
Aeon Wallace

Wordpress fait un très bon travail d'intégration de vidéos au rapport d'aspect correct. La largeur de la vidéo intégrée est basée sur le largeur du conten défini dans le fichier functions.php de votre thème. Pour cette raison, il semble que certains styles puissent être appliqués à l'élément iframe dans votre thème en modifiant sa taille.

Pour vous assurer que vos vidéos fonctionnent à n'importe quelle largeur dans une mise en page réactive sans obtenir de bordures noires disgracieuses autour de la vidéo, vous devrez prendre quelques mesures supplémentaires.

Vous devez d'abord envelopper la vidéo intégrée dans une div afin que nous puissions lui appliquer certains styles. Ajoutez ce qui suit à votre fichier functions.php.

function mythemename_wrap_embeds( $html, $url, $attr, $post_id ) {
    return '<div class="video">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'mythemename_wrap_embeds', 10, 4 );

Ensuite, nous allons ajouter quelques styles qui configurent un rapport intrinsèque assurant la hauteur des échelles vidéo proportionnellement lorsque la largeur change.

.video {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.video:before {
    content: "";
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    display: block;
    overflow: hidden;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

L'élément .video: before utilise un remplissage pour définir sa hauteur par rapport à son parent, le div .video. 56,25% est le rapport 16: 9 calculé en divisant 9 par 16.

Si vous devez gérer dynamiquement n'importe quel rapport d'aspect, vous pouvez ignorer les étapes ci-dessus et utiliser un plugin jQuery comme FitVids .

4
Dylan