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

במדריך נסביר כיצד לגרום לוידאו Youtube להיות רספונסיבי בוורדפרס.

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

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

אין כיום צורך ב Embed Code

לפני שנתחיל, נאמר כי בגירסאותיה המודרניות יותר של וורדפרס, אם אתם מעוניינין להוסיף וידאו מיוטיוב בעורך התוכן של וורדפרס, אתם יכולים פשוט להעתיק את כתובת ה 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 בהתאמה.

אם תתנו מבט בפוסט כלשהו המכיל וידאו באתר שלכם, תגלו כי התווספו אותן קלאסים שהזכרנו. נוסיף כעת את ה 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%;
}

אתם יכולים לכוונן יחס הרוחב / גובה (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 לרספונסיבי, שתפו את החוויות שלכם בתגובות מטה…..

רועי יוסף
רועי יוסף

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

{ 3 תגובות… הוסף אחת }
  • לאה כהן 23 באפריל 2018, 9:11

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

    מאחר שקוד האמבד מביא את ההסרטונים בתור iframe, למה לא פשוט להגדיר לכל iframe שיהיה עם max-width:100% ועם height:auto וזהו? ה – max-width שומר שהוא לא יחרוג מגבולות העמוד, וה – height:auto שומר על הפרופורציה. אצלי בבלוג נראה שזה עובד, וניסיתי עם ה-dev tools על הוידיאו בפוסט הזה (ביטלתי כמובן את שאר ה-CSS שהיה עליו ועל ה-div המכיל שלו) ונראה שזה גם עובד אחלה. אשמח לשמוע מה החיסרון בזה.

    תודה!

  • רועי יוסף 23 באפריל 2018, 14:39

    היי לאה 🙂

    את טועה…. השיטה שאת מתארת לא תעבוד. בדקי את עצמך שוב… 🙂

    • לאה 23 באפריל 2018, 15:46

      אתה צודק!

      אמנם ההגבלה של ה-100% עובדת על הרוחב, אבל טעיתי לגבי ההשפעה של ה-width: auto על הגובה – הוא לא שומר על הפרופורציה. הוא לפעמים חותך ולפעמים מכווץ… באסה איתו.
      תכלס זה באמת היה קל מדי 🙂 אז תודה על טכניקות שכן עובדות!

השאירו תגובה

פעימות
Up!
איך לגבות אתר וורדפרס באמצעות UpdraftPlus
איך לגבות ולשחזר גיבוי של אתר וורדפרס? (עם וללא תוסף)

נראה דרך לבצע גיבוי לאתר וורדפרס ללא תוסף ודרך נוספת לגיבוי עם התוסף UpdraftPlus. ביצוע...