Upgrade to Pro — share decks privately, control downloads, hide ads and more …

It's always the Embeds

Robert Dall
August 27, 2016

It's always the Embeds

Embeds and Responsive Design. Given at the WordCamp Vancouver 2016.

Robert Dall

August 27, 2016
Tweet

More Decks by Robert Dall

Other Decks in Design

Transcript

  1. FIX (AN OBJECT) FIRMLY AND DEEPLY IN A SURROUNDING MASS.

    definition of embed in the dictionary IT’S ALL ABOUT THE EMBEDS #WCYVR robertdall.com/embeds
  2. IT’S ALL ABOUT THE EMBEDS WE DID THIS TO OURSELVES

    #WCYVR robertdall.com/embeds Columbia Journalism Review NASDAQ New York Magazine The Verge
  3. IT’S ALL ABOUT THE EMBEDS HOW DO WE SOLVE THIS

    PROBLEM? FIRST THE PHP… #WCYVR robertdall.com/embeds /** * Add container for videos to make them responsive. */ function rd_add_container_for_video_iframes( $content ) { $content = preg_replace( '#<p>(<iframe src=".+?(vimeo|youtube)\.com/.+?".*?></iframe>)</p>#i', '<div class="responsive-video">$1</div>', $content ); return $content; } add_filter( 'the_content', 'rd_add_container_for_video_iframes' );
  4. IT’S ALL ABOUT THE EMBEDS HOW DO WE SOLVE THIS

    PROBLEM? SECOND THE CSS… #WCYVR robertdall.com/embeds .responsive-video iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .responsive-video { height: 0; margin: 0 0 1.5em; overflow: hidden; padding-bottom: 56.25%; padding-top: 30px; position: relative; }
  5. IT’S ALL ABOUT THE EMBEDS INTERACTIVE GOOGLE MAPS? YUP IFRAME

    AS WELL #WCYVR robertdall.com/embeds WordPress.com Activity Viewer Google Maps 
 container is not 
 responsive Travels to the edge Interactive Map Google Maps 
 container is
 responsive
  6. IT’S ALL ABOUT THE EMBEDS DIFFERENT PROBLEM SAME SOLUTION #WCYVR

    robertdall.com/embeds /** * Add container for Google Maps to make them responsive. */ function rd_add_container_for_google_maps_iframes( $content ) { $content = preg_replace( '#<p>(<iframe src=".+?google\.com/maps.+?".*?></iframe>)</p>#i', '<div class="google-maps">$1</div>', $content ); return $content; } add_filter( 'the_content', 'rd_add_container_for_google_maps_iframes' );
  7. IT’S ALL ABOUT THE EMBEDS THE CSS FOLLOWS SUIT #WCYVR

    robertdall.com/embeds .google-maps iframe { height: 100% !important; left: 0; position: absolute; top: 0; width: 100% !important; } .google-maps { height: 0; overflow: hidden; padding-bottom: 75%; position: relative; }
  8. IT’S ALL ABOUT THE EMBEDS WHAT ABOUT ADS? DON’T THEY

    USE IFRAMES? #WCYVR robertdall.com/embeds Daily Hive Vancity Buzz The Beaverton The Daily Dot
  9. IT’S ALL ABOUT THE EMBEDS THANK YOU & QUESTIONS? #WCYVR

    robertdall.com/embeds RobertDall.com/embeds Twitter:
 @robertdall I’d like to thank Sergey Biryukov for teaching me about this!