Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
It's always the Embeds
Search
Robert Dall
August 27, 2016
Design
0
3.2k
It's always the Embeds
Embeds and Responsive Design. Given at the WordCamp Vancouver 2016.
Robert Dall
August 27, 2016
Tweet
Share
More Decks by Robert Dall
See All by Robert Dall
How to connect Github and Asana
robertdall
0
7.4k
How to submit a Trac Ticket
robertdall
0
110
Taking your website backgrounds to the next level
robertdall
0
2.3k
Other Decks in Design
See All in Design
decksh object reference
ajstarks
2
1.3k
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
510
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
110
What makes a great Director?
_limex_
0
330
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
750
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
360
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1k
Memory Man v3 (WIP)
storybychad
PRO
0
2.7k
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
170
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
4.1k
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
430
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.3k
Featured
See All Featured
Done Done
chrislema
185
16k
It's Worth the Effort
3n
187
28k
Visualization
eitanlees
149
16k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Thoughts on Productivity
jonyablonski
70
4.9k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Facilitating Awesome Meetings
lara
56
6.6k
Transcript
IT’S ALWAYS THE EMBE @ROBERTDALL robertdall.com/embeds #WCYVR
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
None
IT’S ALL ABOUT THE EMBEDS WE DID THIS TO OURSELVES
#WCYVR robertdall.com/embeds Columbia Journalism Review NASDAQ New York Magazine The Verge
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' );
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; }
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
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' );
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; }
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
IT’S ALL ABOUT THE EMBEDS ADS IN A RESPONSIVE DESIGN
#WCYVR robertdall.com/embeds
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!