איך להתאים וידאו לאתרים ריספונסיבים?

how-to-adjust-videos-youtub

לאחרונה נתקלתי בסוג של hack בCSS, המאפשר לשמור יחסי גובה לסרטוני וידאו של יוטיוב בפרט ובכלל לiframeים.

בתור התחלה קל מאוד לתת לאיפריים רוחב פלואידי לדוגמא רוחב של 100%.

הבעיה : שהגובה לא מתאים את עצמו לרוחב של הקונטיינר, גם אם ננסה לתת גובה באחוזים, הדפדפן יתעלם ממנו.

הפיתרון: טכניקה של שימוש ב padding-top מאפשרת לתת יחס ישיר בין רוחב האלמנט לגובה שלו.

איך זה עובד?

בואו נגיד שיש לנו אלמנט ברוחב x, זה באמת לא משנה מה הרוחב שלו. במקרה של רספונסיב זה כנראה יהיה 100% בתוך קונטיינר מסוים.

עכשיו אנחנו רוצים לתת לאלמנט שלנו גובה שיהיה ביחס לרוחב שלו, נגיד שאנחנו רוצים יחס של 16:9.

16 זה הרוחב שכבר קיים מבחינתנו, ועכשיו אנחנו צריכים לדאוג לגובה, בחישוב באחוזים זה לחלק 9 ב 16, זה יוצא 56.25%.

כמו שאמרנו גובה לא עובד בצורה הזאת, אך padding כן! 

אז מה שאנחנו עושים, במקום לתת height אנחנו נותנים padding-top:56.25%  .

עכשיו יש לנו קונטיינר שקיבל גובה דינמי ביחס ישיר לרוחב של הקונטיינר. והתוכן שלו הוא padding שתופס את כל השטח.

בתוכו אנחנו נרצה למקם את הוידאו, רק שכרגע הpadding מפריע. כדי לפתור את הבעיה אנחנו נשחק עם positions.

למעטפת של הוידאו שנתנו padding אנחנו נוסיף position:relative

נשים לנו וידאו של יוטיוב לדוגמא בתוך הקונטיינר

מה שנשאר עכשיו, זה לדאוג למיקום ולגודל של הוידאו. והאמת שזה די פשוט אנחנו נותנים position:absolute, ובגלל שלמעטפת שלנו יש position:relative, אז המיקום יהיה absolute ביחס לקונטיינר של הוידאו, נמקם את הוידאו באחת הפינות העליונות וניתן לו גובה ורוחב 100%, שמתייחסים לקונטיינר שקיבל את הגובה של הpadding.

 לדוגמא עובדת

זהוא! ככה יוצרים בקלות וידאו ריספונסיבי.

קרדיט יש לתת לRachel McCollin, בפוסט מעולה בSmashing Magazine

אתם מזומנים להגיב ולשאול שאלות פה או בקבוצה.

על הכותב/עורך
קוראים לי אלעד שכטר, כיום עובד בחברת וואלה!, בתפקיד של ארכיטקט CSS. אוהב, אוכל ונושם CSS. לוקח את התחום הזה לקצה היכולות שלו.
    1. יפה תודה רבה אלעד
      נטמיע את זה בפרוייקט החדש
      העיקר שזה עובד יפה במעבר בין טבלטים למובייל לדסקטופ
      מעניין עם כול הדפדפנים משתפים פעולה או שלא ממש.

    כתיבת תגובה

    האימייל לא יוצג באתר. (*) שדות חובה מסומנים

    תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">