It's always the Embeds

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

Transcript

1. IT’S ALWAYS THE EMBE @ROBERTDALL robertdall.com/embeds #WCYVR
2. 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
4. IT’S ALL ABOUT THE EMBEDS WE DID THIS TO OURSELVES #WCYVR robertdall.com/embeds Columbia Journalism Review NASDAQ New York Magazine The Verge
5. 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' );
6. 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; }
7. 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
8. 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' );
9. 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; }
10. 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
11. IT’S ALL ABOUT THE EMBEDS ADS IN A RESPONSIVE DESIGN #WCYVR robertdall.com/embeds
12. 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!