סרטוני Youtube רספונסיביים? בקלות!

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

אז… היום נלמד ממש בקצרה איך הופכים סרטוני יוטיוב לרספונסיביים (מותאמים לגודל מסך) ואיך עושים את זה ממש ממש בקלות ומבלי להשתמש בתוספי jQquery כבדים עם המון שורות קוד שאנחנו פשוט לא צריכים! למעשה כל מה שאנחנו צריכים הוא סקריפט קצר בין 5-7 שורות וסיימנו! אפשר אפילו לעשות התניה שבודקת אם האלמנט הרצוי בדף כדי לחסוך זיכרון ולמנוע האטה של טעינת העמוד!

סרטון הדרכה – דורש ריכוז אבל כולל הסבר אנושי

מעדיפים לקרוא ולא לראות סרטון הדרכה? בבקשה…

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

הנה קוד הטמעה סטנדרטי מיוטיוב

<iframe width="560" height="315" src="//www.youtube.com/embed/zpkSv5bdeHI?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

לקוד זה נוסיף את הקלאס resvid ונשנה את הרוחב ל100%

// שימו לב לשינויים החשובים:
// שינינו את הרוחב ל100%
// הוספנו קלאס בשם resvid
<iframe width="100%" height="315" src="//www.youtube.com/embed/zpkSv5bdeHI?rel=0&amp;showinfo=0" frameborder="0" class="resvid" allowfullscreen></iframe>

* השם של הקלאס אינו חייב להיות resvid. אני בחרתי אותו כי הוא הגיוני לי ומשמעותו בעיני היא (responsive video)

יש לנו סרטונים עם מזהה!

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

הנה הסקריפט המלא:

* רוצים להבין מה קורה? צפו בסרטון…


jQuery(document).ready(function($) {
	// RESPONSIVE VIDEO SOLUTION
	$('.resvid').each(function() {
		var vidwidth = $(this).width();
		var vidheight = Math.round( ((vidwidth / 16) * 9) + 35 );
		$(this).height(vidheight);
	});
});

מה הסקריפט הזה עושה?

הסקריפט עושה פעולה פשוטה מאוד בצורה יעילה ועם בסך הכל 4 שורות של קוד!

הסקריפט בודק כל סרטון בתורו ומבקש את הרוחב האמיתי / הפיזי של הסרטון (למרות שהגדרנו לו 100% ברוחב). לאחר מכן הסקריפט עושה תחשיב של הגובה הרצוי כדי ליצור הטמעה בממדים של 16:9 ומחיל את הגובה הרצוי על כל סרטון בתורו! קל משקל, פשוט ויעיל!

אהבתם? יש לכם שאלות? רוצים לשתף משהו?

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

  • אהבתם? שתפו!