הטמעת סרטונים באתר באופן רספונסיבי

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

במדריך זה אקח את קוד ה-Embed של YouTube שנראה כך:

<iframe width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>

זה הזמן להצהיר שבחרתי ב-GANGNAM STYLE כדוגמן של המדריך, בכל זאת, 2,905,807,806 צפיות והיד עוד נטויה.
לעניינינו, אז מה "הבעיה" בקוד Embed שכזה? הבעיה היא שה-width וה-height קבועים בקוד.
ברוב (אם לא בכל) קוד Embed של סרטון וידיאו המאפיינים האלו יהיו קיימים, אם כי ייתכן עם ערכי גובה ורוחב שונים.
תוכן רספונסיבי הוא תוכן שגדל וקטן בהתאם לגודל המסך ולכן אלמנט שמקבל גובה ורוחב קבועים הוא בעייתי ולא רספונסיבי.
לצורך הדוגמה, במידה ואקטין את המסך תראו שחלק מהסרטון פשוט "מסתתר":

אולי חלק מכם יגידו שניתן להגדיר רוחב כ-100% ולפתור את הבעיה אך סביר להניח שלא נרצה שהסרטון ייפרס על כל רוחב המסך.
אז כיצד פותרים זאת?
ראשית, נעטוף את הסרטון בדיב עוטף ונסיר את ה-width וה-height:

<div class="video_wrapper">
    <iframe src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
</div>

ונקנח בקצת CSS:

.video_wrapper {
    position:relative;
    padding-bottom:56.25%;
    overflow:hidden;
}
.video_wrapper iframe {
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:100%;
}

אז מה עשינו כאן?
את הדיב העוטף הגדרנו כ-relative והגדרנו לו padding-bottom של 56.25%.
מספר מוזר, מאין הוא הגיע?
נתון זה הגיע עקב יחס הצפייה של 16:9:

9/16 = 0.5625 = 56.25%

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

משתמשים ב-Bootstrap? הרווחתם!

כאילו לא חסרות סיבות מספיק טובות כדי להשתמש ב-Bootstrap, הנה עוד אחת, הפיכת Embed לרספונסיבי באמצעות Bootstrap היא משימה אפילו פשוטה וקלה יותר, פשוט הכניסו את כתובת ה-src לקוד הבא, בהתאם ליחס הצפייה הרצוי:

ליחס 16:9:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

וליחס 4:3:

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)