web-dev-qa-db-fra.com

Modifier la taille d'une vidéo youtube sur une page et afficher une autre taille sur une autre page

Je dois afficher trois vidéos (type de message personnalisé) sur ma première page. En cliquant sur le lien, le message est affiché et la vidéo doit avoir une largeur par défaut.

Pouvez-vous nous aider à savoir comment modifier la largeur des vidéos (comme YouTube)?

Voici comment j'affiche les informations maintenant, et tout le contenu est affiché (y compris la vidéo). Je dois en quelque sorte montrer uniquement the_excerpt + petite vidéo.

<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <li>
        <?php the_title(
            '<h2 class="entry-title">
                <a href="' . get_permalink() . '"
                title="' . the_title_attribute( 'echo=0' ) . '"
                rel="bookmark">',
            '</a></h2>' );
        ?>          
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    </li>
<?php endwhile; ?>
excerptembedyoutubeoembed
4
renathy

Je suppose que vous utilisez WordPress ' Embeds feature. De manière générale, wp_embed_defaults() vous donne les informations dont vous avez besoin. Un coup d’œil sur source révèle les possibilités que vous avez:

2017    /**
2018     * Create default array of embed parameters.
2019     *
2020     * The width defaults to the content width as specified by the theme. If the
2021     * theme does not specify a content width, then 500px is used.
2022     *
2023     * The default height is 1.5 times the width, or 1000px, whichever is smaller.
2024     *
2025     * The 'embed_defaults' filter can be used to adjust either of these values.
2026     *
2027     * @since 2.9.0
2028     *
2029     * @return array Default embed parameters.
2030     */
2031    function wp_embed_defaults() {
2032            if ( ! empty( $GLOBALS['content_width'] ) )
2033                    $width = (int) $GLOBALS['content_width'];
2034    
2035            if ( empty( $width ) )
2036                    $width = 500;
2037    
2038            $height = min( ceil( $width * 1.5 ), 1000 );
2039    
2040            /**
2041             * Filter the default array of embed dimensions.
2042             *
2043             * @since 2.9.0
2044             *
2045             * @param int $width  Width of the embed in pixels.
2046             * @param int $height Height of the embed in pixels.
2047             */
2048            return apply_filters( 'embed_defaults', compact( 'width', 'height' ) );
2049    }

Comme vous pouvez le constater, la variable global$content_width - $GLOBALS['content_width'] - est la première approche permettant de déterminer la largeur par défaut. Si elle n'est pas vide, elle sera utilisée. La fonction thème Content Width peut être utilisée en ajoutant ce qui suit à votre functions.php:

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

Ce qui définit la largeur dont vous avez besoin. Si vous ne le faites pas, la largeur par défaut est 500px, comme vous pouvez le voir ci-dessus. La hauteur par défaut est 1,5 fois la largeur ou, si elle est inférieure, à 1000 pixels.

La largeur spécifiée est un maximum, donc votre embed ne sera pas plus large que cela, mais sa taille sera réduite. Vous pouvez éventuellement supporter ce comportement via CSS, avec les paramètres suivants:

max-width: 100%;
height: auto;

Ce qui est généralement une recommandation, mais pas nécessairement nécessaire.

Ce qui précède devrait normalement suffire à adapter le contenu incorporé à la taille du conteneur dans lequel il se trouve.

Cependant, la recherche dans la source montre une autre façon de modifier la valeur width (et height). Ce qui serait par hooking dans le filtre embed_defaults. Des informations plus générales sur cette fonctionnalité sont disponibles sur la page de codex WordPress Plugin API , ce qui est un bon point de départ pour en savoir plus sur le sujet. Voici un exemple spécifique d'application de cette possibilité au filtre embed_defaults:

add_filter( 'embed_defaults', 'wpse150029_change_embed_defaults' );
function wpse150029_change_embed_defaults() {
    return array(
        'width'  => 1200, 
        'height' => 800
    );
}

Le code ferait partie de votre functions.php ou d'un plugin. Théoriquement, vous pouvez utiliser les balises conditionnelles pour différencier les valeurs, mais cela n’est probablement pas nécessaire.

Cela devrait couvrir les possibilités de définir la largeur de votre contenu incorporé. Le reste dépend de votre templates et du CSS du thème que vous utilisez.

Comme votre objectif est d’afficher the_excerpt() et la vidéo de votre page d’accueil, de façade ou d’ensemble, vous devez créer votre propre fonction pour extraire l’URL de la vidéo à partir du contenu du message et utiliser . wp_oembed_get() pour récupérer le code HTML incorporé. Par exemple comme ceci:

function wpse150029_fetch_youtube_return_embed_html( $content ) {
    // Regex example+explanation can be found here: http://regex101.com/r/vZ6bX6/3
    // note: the first youtube link will be extracted
    $pattern  = '/(?<=(?:\[embed\])|(?:\[embed\]\s)|(?:))';
    $pattern .= '(https?:\/\/)';
    $pattern .= '(:?www\.)?';
    $pattern .= '(:?youtube\.com\/watch|youtu\.be\/)';
    $pattern .= '([\w\?\=\&(amp;)]+)';
    $pattern .= '(?=(?:\[\/embed\])|(?:\s\[\/embed\])|(?:))';
    $pattern .= '/ims';
    preg_match( $pattern, $content, $matches );
    $url = $matches[0];
    $embed_code = wp_oembed_get( $url );
    return $embed_code;
}

Le code ci-dessus va dans votre functions.php. Exemple d'utilisation dans votre modèle, comme indiqué ci-dessous:

$video_loop = new WP_Query( $args );
if ( $video_loop->have_post() ) :
    while ( $video_loop->have_posts() ) : $video_loop->the_post();
        the_title();         
        the_excerpt();
        echo wpse150029_fetch_youtube_return_embed_html( $post->post_content );
    endwhile;
    wp_reset_postdata();
else :
endif;

Pour une description détaillée de celle-ci, consultez la documentation WP_Query .

Si vous souhaitez réellement avoir des vignettes pour vos vidéos intégrées, vous devriez jeter un œil à ces questions et réponses ici:

7
Nicolai

Je pense qu'une meilleure option sera de redimensionner la vidéo avec CSS, en supposant que vous ayez le conteneur .video_index pour l'index des vidéos et .video_single pour une seule entrée vidéo, voici un exemple.

.video_index iframe{ width: 250px; height: 170px; } .video_single iframe{ width: 500px; height: 360px; }

3
crissoca

Oui, la vieille histoire avec (O) intègre et la largeur du contenu. Dès qu'il y a répulsion, tout le système s'effondre. Une solution qui pourrait être utile est ce que nous faisons dans nos thèmes:

/**
 * Change the embed code, so we can apply awesome css shit
 * Called by filter "oembed_result"
 *
 * @author Hendrik Luehrsen
 * @since 1.0
 *
 * @param $html string The oembed html to edit
 *
 * @return string The edited html
 */
function change_oembed($html, $url, $args){
    $video_pattern = "#(\W|^)(youtube|vimeo)(\W|$)#";

    if(preg_match($video_pattern, $url)){
        $new_html = '<div class="clearfix"></div><div class="oembed-wrapper"><img src="'.WP_THEME_URL.'/img/16x9_placeholder.png" />'.$html.'</div>';
    } else {
        $new_html = $html;
    }

    return $new_html;
}
add_filter( 'oembed_result', array($this, 'change_oembed'), 999, 3 );

Un peu d'explication: la constante WP_THEME_URL est ce qu'elle prétend être, l'URL du thème. 16x9 placeholder.png est un fichier PNG transparent de 16 sur 9 pixels. Le reste est fait en CSS/LESS.

.oembed-wrapper {
    width: 100%;
    height: auto;
    position: relative;
    margin: 30px 0;

    img {
        width: 100%;
        height: auto;
        margin: 0 !important;
    }

    iframe {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
}

En conséquence, la vidéo intégrée est toujours redimensionnée à 100% du conteneur en conservant le format 16x9. De cette façon, vous pouvez déposer le oembed où vous voulez.

Je sais qu'il existe des méthodes pour supprimer l'image (avec des pseudo-sélecteurs sur .oembed-wrapper) afin de conserver les proportions, mais je ne les ai jamais lues. Cela fonctionne dans 99% des cas.

3
Hendrik Luehrsen