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
3k
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.1k
How to submit a Trac Ticket
robertdall
0
94
Taking your website backgrounds to the next level
robertdall
0
2.1k
Other Decks in Design
See All in Design
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
600
Yahoo Newsletter Clicker Template
xuechunwu
0
300
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.5k
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
220
Improve a service workshop
mastervicedesign
1
130
横断組織デザイナーの働き方
mixi_design
PRO
0
200
今日から始める グラレコ チャレンジ DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
140
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
180
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
270
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1k
Slip N Slime - Character Design Ideation
thebogheart
0
340
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
7.1k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Faster Mobile Websites
deanohume
305
30k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A Philosophy of Restraint
colly
203
16k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
A designer walks into a library…
pauljervisheath
204
24k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Agile that works and the tools we love
rasmusluckow
328
21k
How to Ace a Technical Interview
jacobian
276
23k
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!