Search

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

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

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

13 תגובות...
  • לאה כהן 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 על הגובה – הוא לא שומר על הפרופורציה. הוא לפעמים חותך ולפעמים מכווץ… באסה איתו. תכלס זה באמת היה קל מדי 🙂 אז תודה על טכניקות שכן עובדות!

  • חיים לוי 21 ספטמבר 2018, 13:00

    יש אפשרות להטמיע מיוטיוב שידור חי?

    • רועי יוסף 8 אוקטובר 2018, 3:27

      היי חיים,

      עד כמה שידוע לי ניתן לעשות זאת בצורה הבאה:

      <iframe width="560" height="315" src="https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID&autoplay=1" frameborder="0" allowfullscreen></iframe>

      כאשר אתה צריך להחליף את ה CHANNEL_ID כמובן…

  • רוב 30 אפריל 2019, 10:25

    נהדר כמו תמיד

  • אייל אפשטיין 23 יולי 2020, 16:59

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

    • רועי יוסף 23 יולי 2020, 21:43

      היי אייל,

      זה דורש עבודת Javascript. לצערי הסבר על כיצד לעשות זאת הוא מעבר לסקופ של מדריך זה … צר לי.

  • רוב 14 אוקטובר 2020, 16:46

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

    • רועי יוסף 14 אוקטובר 2020, 16:49

      היי רוב, מחקתי את החלק המדבר על התוסף מהפוסט. איזה שגיאה אתה מקבל מהקוד שלי?

      • רוב 14 אוקטובר 2020, 17:47

        היי, היה איזה משהו עם t-string לגבי wpse_embed_oembed_htm. אני חושב שזה כי ה-theme די ישן וגם האתר די ישן. יש לי את הקוד הזה בקובץ של functions.php:

        <?php
        
        @ini_set( ‘upload_max_size’ , ‘32M’ );
        
        @ini_set( ‘post_max_size’, ‘32M’);
        
        @ini_set( ‘max_execution_time’, ‘1000’ );
        
        ?>
        • רועי יוסף 14 אוקטובר 2020, 17:50

          הקוד הזה לא אמור להיות ב functions.php בכלל. אין לו שום השפעה ואתה יכול להסיר אותו..

          • רוב 15 אוקטובר 2020, 9:43

            אוקי, תודה.
            אני אבדוק את זה

תגובה חדשה

Up!
לבלוג