WordPress.org

Make WordPress Core

Ticket #21480: 21480.patch

File 21480.patch, 2.5 KB (added by lancewillett, 7 years ago)

Non-JS method to wrap and style embeds

  • wp-content/themes/twentytwelve/style.css

     
    297297video {
    298298        max-width: 100%;
    299299}
     300.video-embed {
     301        height: 0 !important;
     302        overflow: hidden !important;
     303        padding-top: 30px !important;
     304        padding-bottom: 56.25% !important;
     305        position: relative !important;
     306}
     307.video-embed embed,
     308.video-embed iframe,
     309.video-embed object,
     310.video-embed video {
     311        position: absolute !important;
     312        top: 0 !important;
     313        left: 0 !important;
     314        width: 100% !important;
     315        height: 100% !important;
     316}
    300317
    301318/* Images */
    302319.alignleft {
  • wp-content/themes/twentytwelve/functions.php

     
    387387                $content_width = 960;
    388388        }
    389389}
    390 add_action( 'template_redirect', 'twentytwelve_content_width' );
    391  No newline at end of file
     390add_action( 'template_redirect', 'twentytwelve_content_width' );
     391
     392/**
     393 * Add new HTML container element around video embeds
     394 * to allow for CSS scaling of videos in responsive layouts.
     395 *
     396 * @param string The embed HTML content.
     397 * @param string URL for embed.
     398 * @return string New HTML content.
     399 *
     400 * @since Twenty Twelve 1.0
     401 */
     402function twentytwelve_modify_embed_output( $html, $url ) {
     403        $resize = false;
     404        $accepted_providers = array(
     405                'blip.tv',
     406                'dailymotion',
     407                'funnyordie.com',
     408                'hulu.com',
     409                'revision3.com',
     410                'scribd.com'
     411                'slideshare',
     412                'viddler.com',
     413                'vimeo',
     414                'wordpress.tv',
     415                'youtube',
     416        );
     417
     418        // Check each provider.
     419        foreach ( $accepted_providers as $provider ) {
     420                if ( strstr( $url, $provider ) ) {
     421                        $resize = true;
     422                        break;
     423                }
     424        }
     425
     426        // Not an accepted provider.
     427        if ( ! $resize )
     428                return $html;
     429
     430        // Pattern for removing width and height attributes.
     431        $attr_pattern = '/(width|height)="[0-9]*"/i';
     432        $whitespace_pattern = '/\s+/';
     433        $embed = preg_replace( $attr_pattern, '', $html );
     434        $embed = preg_replace( $whitespace_pattern, ' ', $embed );
     435        $embed = trim( $embed );
     436
     437        // Add container around the video, use a <p> to avoid conflicts with wpautop()
     438        $html = "<p class=\"video-embed\">$embed</p>\n";
     439
     440        return $html;
     441}
     442add_filter( 'embed_oembed_html', 'twentytwelve_modify_embed_output', 10, 2 );
     443 No newline at end of file