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
2.7k
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
6.8k
How to submit a Trac Ticket
robertdall
0
66
Taking your website backgrounds to the next level
robertdall
0
2k
Other Decks in Design
See All in Design
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
150
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
170
Goodpatch Tour💙 / We are hiring!
goodpatch
28
690k
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
120
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
520
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.5k
3D空間を扱うUI表現とユーザビリティ
akinen
0
410
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
340
ゼロから学ぶWebアクセシビリティ~導入編~
magi1125
4
1.6k
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
390
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
270
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
1
630
Featured
See All Featured
Navigating Team Friction
lara
177
13k
Designing Experiences People Love
moore
135
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
What's in a price? How to price your products and services
michaelherold
236
11k
Side Projects
sachag
451
41k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
It's Worth the Effort
3n
180
27k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
The Invisible Side of Design
smashingmag
293
49k
GraphQLとの向き合い方2022年版
quramy
28
12k
The Invisible Customer
myddelton
114
12k
RailsConf 2023
tenderlove
0
510
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!