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

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

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

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

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

אז איך עושים את זה?

אם השתמשתם בתבנית שלכם בBootstrap, אתם נדרשים להוסיף קלאס לiFrame של הוידאו עצמו ועוד קלאס לאלמנט שעוטף את ה iFrame ובגלל שבמקרה שלנו הקוד נוצר דרך וורדפרס ואין לנו גישה ישירה לערוך אותו אנחנו נשתמש בפילטר שעושה את זה ואת הפילטר נוסיף לקובץ functions.php של התבנית שלנו.

add_filter('embed_oembed_html', 'my_embed_oembed_html', 99, 4);
function my_embed_oembed_html($html, $url, $attr, $post_id) {
	// Add Bootstrap class to the iframe code
	$html = str_replace( '<iframe', '<iframe class="embed-responsive-item" ', $html );
	// Add wrapper div with Bootstrap class 
	// you can use embed-responsive-16by9 for 16:9 aspect ratio (HD)
	// or embed-responsive-4by3 for 4:3 aspect ratio
	return '<div class="embed-responsive embed-responsive-16by9">' . $html . '</div>';
}

נעבור על מה שכתבנו כאן:

בשורה הראשונה אנחנו מוסיפים את הפילטר למערכת ובשורה שאחר כך מכריזים על פונקציה שנקראת my_embed_oembed_html ומקבלת ארבעה ארגומנטים. אחד מהם הוא קוד הHTML של המדיה. מדובר בiFrame שמכיל גובה ורוחב קבוע.

בשורה 4 אנחנו מחליפים את הקוד הרגיל של הiFrame שמופק מהמערכת ומוסיפים לו את הקלאס שBootstrap דורשת מאיתנו להוסיף לאובייקט כדי שהוא יהיה רספונסיבי.

בשורה 8 אנחנו מחזירים את הקוד המתוקן למערכת וזה יהיה הקוד שהדפדפן של המשתמש יקבל אבל – אנחנו לא מחזירים רק את הiFrame. אנחנו מוסיפים דיב שעוטף את הiFrame ואליו אנחנו משיייכים את הקלאס השני שBootstrap דורשת.

כעת יש לנו דיב עם קלאס מתאים וiFrame שגם אליו הוספנו קלאס ובתוכו יהיה הוידאו שלנו. ברגע שהמשתמש יכנס אל הדף הוא יקבל וידאו רספנסיבי שמתאים עצמו לרוחב המסך של המשתמש.

אם התבנית שלכם מבוססת על Foundation דווקא, אתם צריכים להוסיף לקוד רק קלאס אחד בדיב שעוטף את הiFrame. זה למעשה הרבה יותר הגיוני ומעט יותר קצר. זה נעשה כך:

add_filter('embed_oembed_html', 'my_embed_oembed_html', 99, 4);
function my_embed_oembed_html($html, $url, $attr, $post_id) {
	// Add wrapper div with Foundation class 
	return '<div class="flex-video">' . $html . '</div>';
}

 אבל יש פלאגינים שעושים את זה!

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

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

יש לכם רעיון אחר? הערה? שאלה? אשמח לקרוא את התגובות שלכם.