it-swarm.com.de

Ändern Sie die YouTube-Videogröße auf einer Seite und zeigen Sie eine andere Größe auf einer anderen Seite an

Ich muss auf meiner ersten Seite drei Videos (benutzerdefinierter Beitragstyp) anzeigen. Wenn Sie auf den Link klicken, wird der Beitrag angezeigt und das Video sollte die Standardbreite haben.

Kannst du helfen, herauszufinden, wie die Breite von Videos (wie z. B. YouTube) geändert werden kann?

Auf diese Weise zeige ich jetzt Informationen an, und auf diese Weise werden alle Inhalte (einschließlich Videos) angezeigt. Ich muss irgendwie nur the_excerpt + kleines Video zeigen.

<?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; ?>
4
renathy

Ich gehe davon aus, dass Sie WordPress ' Embeds Feature verwenden. Im Allgemeinen wp_embed_defaults() gibt Ihnen die Informationen, die Sie benötigen. Ein Blick auf source zeigt die Möglichkeiten, die Sie haben:

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    }  

Wie Sie sehen, ist die Variable global$content_width - $GLOBALS['content_width'] - der erste Ansatz, um die Standardbreite zu bestimmen. Wenn sie nicht leer ist, wird sie verwendet. Die Themenfunktion Inhaltsbreite kann verwendet werden, indem Sie Ihrem functions.php Folgendes hinzufügen:

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

Welches stellt die Breite ein, die Sie benötigen. Wenn Sie dies nicht tun, beträgt die Breite standardmäßig 500px, wie Sie oben sehen können. Die Standardhöhe ist entweder das 1,5-fache der Breite oder - falls diese geringer ist - 1000px.

Die angegebene Breite ist ein Maximum, sodass Ihr Einbetten nicht breiter als das ist, sondern verkleinert wird. Sie können dieses Verhalten möglicherweise über CSS mit den folgenden Parametern unterstützen:

max-width: 100%;
height: auto;

Welches ist in der Regel eine Empfehlung, aber nicht unbedingt erforderlich.

Das oben Genannte sollte normalerweise ausreichen, um Ihre eingebetteten Inhalte auf die Größe des Containers zu skalieren, in dem sie sich befinden.

Der Blick in die Quelle zeigt jedoch eine andere Möglichkeit, den Wert für Breite (und Höhe) zu ändern. Welches wäre durch Hooking in den embed_defaults-Filter. Allgemeinere Informationen zu dieser Funktionalität finden Sie auf der WordPress-Codex-Seite Plugin API . Hier erfahren Sie zunächst mehr über das Thema. Ein konkretes Beispiel für die Anwendung dieser Möglichkeit auf den Filter embed_defaults sieht folgendermaßen aus:

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

Der Code wäre Teil Ihres functions.php oder eines Plugins. Theoretisch können Sie Bedingte Tags verwenden, um die Werte zu unterscheiden, dies ist jedoch unwahrscheinlich.

Dies sollte die Möglichkeiten zum Einrichten der Breite Ihres eingebetteten Inhalts abdecken. Der Rest hängt von Ihren Vorlagen und dem CSS des von Ihnen verwendeten Themas ab.

Als Ziel ist es, the_excerpt() und das Video auf Ihrer Startseite, Front- oder Übersichtsseite anzuzeigen, müssen Sie Ihre eigene Funktion erstellen, um die Video-URL aus dem Beitragsinhalt zu extrahieren und wp_oembed_get() zum Abrufen der Einbettung zu verwenden HTML. Zum Beispiel so:

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;
}

Der obige Code steht in Ihrem functions.php. Beispielhafte Verwendung in Ihrer Vorlage wie unten gezeigt:

$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;

Eine ausführliche Beschreibung hierzu finden Sie in der Dokumentation WP_Query .

Wenn Sie tatsächlich Miniaturansichten für Ihre eingebetteten Videos haben möchten, sollten Sie sich die folgenden Fragen und Antworten ansehen:

7
Nicolai

Ich denke, dass eine bessere Option darin besteht, die Größe des Videos mit CSS zu ändern. Angenommen, Sie haben den Container .video_index für den Index der Videos und .video_single für einen einzelnen Videoeintrag. Hier ein Beispiel.

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

3
crissoca

Ja, die alte Geschichte mit (O) Einbetten und Inhaltsbreite. Sobald es eine Nachlässigkeit gibt, fällt das ganze System auseinander. Eine Lösung, die von Nutzen sein könnte, ist das, was wir in unseren Themen tun:

/**
 * 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 );

Ein bisschen Erklärung: Die Konstante WP_THEME_URL ist die angebliche URL zum Thema. 16x9 placeholder.png ist eine transparente PNG-Datei mit 16 x 9 Pixeln. Der Rest wird in CSS/LESS erledigt.

.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%;
    }
}

Dadurch wird das eingebettete Video immer auf 100% des Containers skaliert, indem das Seitenverhältnis von 16 x 9 beibehalten wird. Auf diese Weise können Sie das oembed fallen lassen, wo immer Sie wollen.

Ich weiß, dass es Methoden gibt, um das Bild abzulegen (mit Pseudo-Selektoren auf .oembed-wrapper), um das Seitenverhältnis beizubehalten, aber ich habe nie in diese gelesen. Dies funktioniert in 99% der Fälle.

3