Skip to content

Instantly share code, notes, and snippets.

@anthonyeden

anthonyeden/Responsive-YouTube-Embed-Wordpress-Filters.php

Last active December 1, 2020 11:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anthonyeden/5f676bfb31cc8bcb36e01d95f4e3d6b9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anthonyeden/5f676bfb31cc8bcb36e01d95f4e3d6b9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. anthonyeden revised this gist Jul 13, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Responsive-YouTube-Embed-Wordpress-Filters.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <?php

    add_filter('the_content', functions($content) {
    add_filter('the_content', function($content) {
    return str_replace(array("<iframe", "</iframe>"), array('<div class="iframe-container"><iframe', "</iframe></div>"), $content);
    });

  2. anthonyeden created this gist Dec 24, 2018.
    18 changes: 18 additions & 0 deletions Responsive-YouTube-Embed-Wordpress-Filters.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <?php

    add_filter('the_content', functions($content) {
    return str_replace(array("<iframe", "</iframe>"), array('<div class="iframe-container"><iframe', "</iframe></div>"), $content);
    });

    add_filter('embed_oembed_html', function ($html, $url, $attr, $post_id) {
    if(strpos($html, 'youtube.com') !== false || strpos($html, 'youtu.be') !== false){
    return '<div class="embed-responsive embed-responsive-16by9">' . $html . '</div>';
    } else {
    return $html;
    }
    }, 10, 4);


    add_filter('embed_oembed_html', function($code) {
    return str_replace('<iframe', '<iframe class="embed-responsive-item" ', $code);
    });
    20 changes: 20 additions & 0 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    .embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
    }
    .embed-responsive .embed-responsive-item,
    .embed-responsive iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    }
    .embed-responsive-16by9 {
    padding-bottom: 56.25%;
    }