Skip to content

Instantly share code, notes, and snippets.

@wpfangirl

wpfangirl/responsive-embeds.css

Last active August 24, 2024 19:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save wpfangirl/73436d26d7de3b82e66a9c4036d8490f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save wpfangirl/73436d26d7de3b82e66a9c4036d8490f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. wpfangirl revised this gist Aug 24, 2024. No changes.
  2. wpfangirl created this gist Aug 24, 2024.
    19 changes: 19 additions & 0 deletions responsive-embeds.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    /**
    * Add to your stylesheet if it isn't there
    */

    .wp-embed-responsive {
    position:relative;
    margin-bottom: 20px;
    }

    .wp-embed-responsive > iframe{
    bottom:0;
    height:100%;
    left:0;
    position:absolute;
    right:0;
    top:0;
    width:100%;
    max-width:100%;
    }
    22 changes: 22 additions & 0 deletions responsive-embeds.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    <?php
    /**
    * Responsive embed padding calculation adapted from @mayasol
    * https://developer.wordpress.org/reference/hooks/oembed_dataparse/
    * Add this to your functions.php file or wherever you're putting additional PHP
    */

    add_filter( 'oembed_dataparse', 'wrap_oembed_dataparse', 99, 4 );
    function wrap_oembed_dataparse($return, $data, $url) {

    $mod = '';
    $ratio = '';
    $padding = '';

    if ( isset($data->width) && isset($data->height) ) {
    $mod = 'wp-embed-aspect-' . $data->width . '-' . $data->height;
    $ratio = round($data->height/$data->width, 4);
    $padding = ( $ratio * 100 );
    }

    return '<div class="wp-embed-responsive ' . $mod . '"><span style="display:block; padding-top: ' . $padding . '%";></span>' . $return . '</div>';
    }