Skip to content

Instantly share code, notes, and snippets.

@stevengliebe

stevengliebe/responsive-embeds.js

Created August 26, 2015 12:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stevengliebe/40276b05ed782d78631a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stevengliebe/40276b05ed782d78631a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Steven Gliebe created this gist Aug 26, 2015.
    36 changes: 36 additions & 0 deletions responsive-embeds.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    /**
    * Responsive Embeds
    */

    jQuery( document ).ready( function( $ ) {

    // Remove <object> element from Blip.tv ( use iframe only ) - creates a gap w/FitVid
    $( "embed[src*='blip.tv']" ).remove();

    // Use FitVid for responsive videos and other embeds
    // YouTube and Vimeo work out of the box
    // Rdio and Spotify are correct when loading at final size ( browser resize is bad demo )
    $( 'body' ).fitVids( { // content and sidebar
    customSelector: [
    "iframe[src*='youtu.be']",
    "iframe[src*='blip.tv']",
    "iframe[src*='hulu.com']",
    "iframe[src*='dailymotion.com']",
    "iframe[src*='revision3.com']",
    "iframe[src*='slideshare.net']",
    "iframe[src*='scribed.com']",
    "iframe[src*='viddler.com']",
    "iframe[src*='rd.io']",
    "iframe[src*='rdio.com']",
    "iframe[src*='spotify.com']",
    "iframe[src*='soundcloud.com']",
    "iframe[src*='snd.sc']",
    "iframe[src*='livestream.com']"
    ]
    } );

    // Other embedded media only need max-width: 100% ( height is static ) - SoundCloud, MediaElement.js, etc.
    // Important: when done via stylesheet, MediaElement.js volume control flickers
    $( ".wp-video-shortcode, .wp-audio-shortcode" ).css( 'max-width', '100%' );

    } );