בטח נתקלתם בזה יותר מפעם אחת. אתם מטמיעים סרטון מיוטיוב או כל iframe אחר, ונותנים לו רוחב, לדוגמה 100%, או 300 פיקסלים. אתם נותנים גם גובה, כך שייראה טוב בדסקטופ. ואז מגיע השלב של רספונסיב לעמוד, והרוחב של הiframe קטן או גדל באחוזים ניכרים מרוחבו בדסקטופ. מה עושים עם הגובה?
אם היה מדובר בתמונה, היינו נותנים רוחב כלשהו + גובה אוטומטי, ואז הגובה נגזר תמיד מהרוחב. כלומר, ככל שהרוחב גדל כך גם הגובה גדל והיא לא מתעוותת. לעומת זאת לרכיב מסוג iframe או div לא ניתן להגדיר גובה אוטומטי ויש לקבוע גובה כלשהו, באחד מיחידות המידה הקיימות – פיקסלים, em, % וכדו'. אם כך – איך מגדירים את הגובה של האלמנט כך שייגזר מהרוחב שלו, בדיוק כמו שזה קורה בתמונה?
הפתרון – padding-top – הסבר
כשאנחנו נותנים לאלמנט כלשהו padding-top באחוזים – זה לא אחוזים מהגובה שלו, אלא אחוזים מהרוחב של האבא שלו. כך שאם האבא שלו בגודל 40 פיקסלים, ונתנו לאלמנט padding-top: 100% – הרי שבעצם הגדרנו לו גובה של 40 פיקסלים.
שימו לב שוב, שמדובר ברוחב של האלמנט האב, ולא באלמנט עצמו שעליו אנחנו נותנים את הpadding, ולכן אם הרוחב של האלמנט לא תופס תמיד את אותם אחוזים של האבא, אלא בגדלי מסך מסויימים תופס לדוגמה 50 אחוזים ובגדלים אחרים 100 אחוזים – כדאי לעטוף את האלמנט שלנו באלמנט נוסף, שהוא כבר יהיה עם הרוחב הנדרש, וכך האלמנט שלנו תמיד יתפוס 100%. זה נשמע סיפור אבל מיד ניתן דוגמאות והכל יהיה פשוט יותר.
ואיך עושים את זה בפועל?
נעטוף את הiframe בdiv, שניתן לו padding-top של בסביבות ה70% (זו הפרופורצי של סרטוני יוטיוב, אם יש לכם iframe שונה – תנו כאוות נפשכם מה שנראה לכם מתאים). ובנוסף ניתן לdiv החביב גם position relative.
כעת לiframe עצמו – ניתן לו את ההגדרות הבאות:
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
קצת הסבר איך זה פועל
הdiv שיצרנו הוא זה שבפועל נותן את הגובה. אנחנו מגדירים לו padding-top באחוזים כך שהוא יגיע לגובה הרצוי. לעומת זאת לiframe שלנו הגדרנו position: absolute עם top + left שצמודים לשוליים של האב הרלטיבי, וכן גובה ורוחב 100% של האבא הרלטיבי (שהוא בעצם האבא שלו), כך שהוא תופס את מלא הגודל המוגדר.
כעת ככל שנקטין את הרוחב של הdiv – הרי שגם הגובה שלו יקטן, וממילא גם הגובה והרוחב של הiframe.
והנה דוגמה חיה
שימו לב לiframe הראשון, שנמצא ללא האלמנט העוטף איך הוא מתנהג כשמשנים את גודל המסך. לעומת הiframe השני שגדל וקטן באופן פרופורציונלי.
לא רק iframe…
באופן הזה ניתן להגדיר רכיבים נוספים כך שיהיו תמיד בגובה שנגזר מהרוחב שלהם.
דוגמה נפוצה נוספת – כשיש לנו אלמנט עם backgroud-image, ואנחנו מן הסתם תמיד רוצים שהגובה והרוחב יהיו באותה פרופורציה, בכל רוחבי המסך. גם כאן – נוכל להגדיר את האלמנט עם הרקע ללא גובה, וכן עם padding-top באחוזים הדרושים.
רוחב האבא
אני כל הזמן מדגישה את העניין שהpadding top נגזר מרוחב האבא ולא מרוחב האלמנט עצמו. כאן ניתן לראות דוגמה חיה של זה ושל הבעייתיות שקורית כשנותנים את הpadding-top לאלמנט שנותן את הרוחב. שימו לב לפרופורציות המשתנות כשמגדילים ומקטינים את המסך. (תוציאו את הקוד למסך מלא, ואז ניתן יהיה לראות עם נקודות שבירה שונות את ההתנהגות הבעייתית).
גם לכם יש תובנות על iframe רספונסיבי? רוצים לשתף בדוגמאות נוספות שpadding-top פתר לכם בעיות? אשמח לשמוע 🙂