web-dev-qa-db-fra.com

Comment intégrer un champ personnalisé, en taille du conteneur et de sa réactivité

J'utilise Magic Fields 2 pour ajouter des champs personnalisés/des boîtes à méta.

Un champ personnalisé concerne l’affichage d’une URL de vidéo Vimeo ou YouTube.

Le code suivant oEmbre l'URL de la vidéo :

<?php if (!((get_post_meta($post->ID, 'video_url', TRUE))=='')) {
    echo wp_oembed_get( get_post_meta($post->ID, "video_url", true) );
}?>

Pour redimensionner la vidéo, j'ai utilisé le code ajouté dans <div class="video"> et l'a redimensionné à l'aide de CSS - .video iframe {width:500px;height:312px}.

Le problème, cette méthode n'est pas sensible.

J'ai aussi essayé .video iframe {width:95%;height:95%}. Cette sortie ressemble à -

enter image description here

Le plugin Fluid Video Embeds semble faire le travail pour oEmbeds via la méthode WordPress normale et par shortcode, mais pas avec un champ personnalisé.

custom-fieldresponsiveoembed
3
Travis Pflanz

J'ai terminé la tâche avec fitvids.js en utilisant le plugin FitVids for WordPress .

Chris Coyier décrit l'intégration avec WordPress dans son screencast Intégration de FitVids.js dans WordPress ( sur YouTube ).

Mon nom de champ personnalisé est video_url. J'ai utilisé le code suivant dans mon modèle:

<?php if (!((get_post_meta($post->ID, 'video_url', TRUE))=='')) {
    echo wp_oembed_get( get_post_meta($post->ID, "video_url", true) );
}?>

Dans les paramètres de FitVids pour WordPress, entrez simplement la classe ou l’identifiant div qui représente la largeur maximale de la vidéo.

enter image description here

Pour ceux qui en ont besoin, l’intégration de FitVids.js dans le screencast de WordPress montre comment vérifier le thème pour jQuery et pour le sélecteur CSS approprié.

2
Travis Pflanz