כיצד להפוך סרטון Youtube לרספונסיבי בוורדפרס?

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

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

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

אך הוידאו עדיין אינו רספונסיבי

בכל מקרה, הוידאו עדיין אינו רספונסיבי והוספת width: 100% ו height: auto לקובץ ה CSS אינה פותרת את הבעיה ברוב המקרים. ישנן אגב לא מעט פתרונות שמאפשרים להפוך סרטון יוטיוב לרספונסיבי על ידי הוספת אלמנטים עוטפים (DIV's) כלשהם לסרטון.

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

פתרון ראשון – ללא תוסף ובאמצעות קוד

פתרון זה מיושם על ידי הוספת קוד הבא לקובץ functions.php בתבנית שלכם, או טוב מזה – בתבנית הבת של אתר הוורדפרס שלכם. בצורה זו לא תאבדו את השינויים כאשר תעדכנו את התבנית שלכם. הנה הקוד:

function wpse_embed_oembed_html( $cache, $url, $attr, $post_ID ) {
	$classes = array();

	// Add these classes to all embeds.
	$classes_all = array(
		'responsive-container',
	);

	// Check for different providers and add appropriate classes.

	if ( false !== strpos( $url, 'vimeo.com' ) ) {
		$classes[] = 'vimeo';
	}

	if ( false !== strpos( $url, 'youtube.com' ) ) {
		$classes[] = 'youtube';
	}

	$classes = array_merge( $classes, $classes_all );

	return '<div class="' . esc_attr( implode( $classes, ' ' ) ) . '">' . $cache . '</div>';
}
add_filter( 'embed_oembed_html', 'wpse_embed_oembed_html', 99, 4 );

קוד זה עושה שימוש בפילטר בשם embed_oembed_html  (שלא נרחיב על עליו) וגורם לכך שסרטונים של יוטיוב או סרטונים של Vimeo שאתם מוסיפים בעורך התוכן, יקבלו סביבם את אותו אלמנט עוטף. זהו בעצם DIV עם קלאס בשם reposnsive-container, כאשר בהתאם לסוג הסרטון שהטמעתם יתווספו הקלאסים youtube או vimeo בהתאמה.

פתרון אלטרנטיבי נוסף להוספה אוטומטית של div עוטף לסרטונים

אם לא עבד לכם מסיבה כלשהי הסניפט הקודם – הנה דרך אלטרנטיבית להוסיף אלמנט עוטף עם הקלאס .responsive-container לסרטונים שאתם מוסיפים בעורך של וורדפרס:

add_filter('embed_oembed_html', function ($html, $url, $attr, $post_id) {
    if(strpos($html, 'youtube.com') !== false || strpos($html, 'youtu.be') !== false){
        return '<div class="responsive-container embed-responsive-16by9">' . $html . '</div>';
    } else {
        return $html;
    }
}, 10, 4);

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

.responsive-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.responsive-container iframe,
.responsive-container object,
.responsive-container embed,
.responsive-container video,
.responsive-container .youtube,
.responsive-container .vimeo

{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

נאמר כי אם מוסיפים את ה iframe של הוידאו אותו קיבלתם מיוטיוב ישירות בקוד ולא דרך עורך התוכן של וורדפרס, פשוט עטפו אותו באלמנט עם הקלאס .responsive-container והוסיפו את ה CSS. אין צורך בקוד ה PHP המוזכר מעלה.

על כל מקרה, אתם יכולים לכוונן יחס הרוחב / גובה (aspect ratio) בכדי שיתאים לוידאו על ידי שינוי ה padding-bottom ב CSS זה. בעיקרון, 56.25% מתאים למרבית הסרטונים. אם אתם מעוניינים לדעת מדוע הנה ההסבר המתמטי:

9 divided by 16 is equal to 0.5625, which we can translate to 56.25%. And that holds true for all aspect ratios: 4:3 is 3 divided by 4 which equals 0.75, or 75%. 2.39:1 is 1 divided by 2.39 which equals 0.4184, or 41.84%.

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

פתרון שני – שימוש בתוסף וורדפרס

ישנם לא מעט תוספי וורדפרס שמאפשרים וידאו רספונסיבי בוורדפרס, בין אם באמצעות שורטקודים ובין אם באמצעות שיטות אחרות. אך ישנו תוסף נחמד, קל משקל ופשוט שנקרא Fluid Video Embeds. פשוט הפעילו אותו והוא עושה את העבודה בצורה מצויינת.

התוסף מזהה אוטומטית את ה aspect ratio של הסרטונים שהטמעתם ותומך בסרטונים מיוטיוב ומ Vimeo. לתוסף יש עמוד הגדרות בו אתם יכולים להתאים את התוסף לצרכים שלכם.

אך שימו לב – השימוש בתוסף יכול להוות עניין ברמת האופטימיזציה ומהירות אתר הוורדפרס שלכם. עם הגדרות ברירת המחדל שלו ה CSS שהתוסף טוען מיוצר בצורה דינמית באמצעות קריאה ל Ajax Controller (כלומר wp-admin/admin-ajax.php) .

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

/* Fluid Video Embeds */
.fve-video-wrapper {
    position: relative;
    overflow: hidden;
    height: 0;
    background-color: transparent;
    padding-bottom: 56.25%;
    margin: 0.5em 0;
}
.fve-video-wrapper iframe,
.fve-video-wrapper object,
.fve-video-wrapper embed {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.fve-video-wrapper a.hyperlink-image {
    position: relative;
    display: none;
}
.fve-video-wrapper a.hyperlink-image img {
    position: relative;
    z-index: 2;
    width: 100%;
}
.fve-video-wrapper a.hyperlink-image .fve-play-button {
    position: absolute;
    left: 35%;
    top: 35%;
    right: 35%;
    bottom: 35%;
    z-index: 3;
    background-color: rgba(40, 40, 40, 0.75);
    background-size: 100% 100%;
    border-radius: 10px;
}
.fve-video-wrapper a.hyperlink-image:hover .fve-play-button {
    background-color: rgba(0, 0, 0, 0.85);
}

הגדרות מסויימות של תוספי Caching כאלו או אחרות כגון התוסף WP-Rocket יכולות גם כן לבצע פעולה זו בשבילכם ללא שינוי בהגדרות תוסף הוידאו הרספונסיבי המדובר – Fluid Video Embeds.

אם ניסיתם אחת משיטות אלו בכדי להפוך וידאו Youtube לרספונסיבי, שתפו את החוויות שלכם בתגובות מטה…..