מדריך: הוספת מסגרת לסרטונים מ-YouTube

[24 באוגוסט 2009] [5 תגובות]

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

מה אנחנו עומדים לעשות?

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

מסגרת לסרטונים

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

הדגמה של התוצר הסופי

הורדת הקבצים

איך מכינים מסגרת כזאת?

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

תבנית המסגרת

מומלץ שהמסגרת תהיה שקופה (Transparent) אחרת לא תוכלו לשנות את צבע הרקע של האתר שלכם. התמונה למעלה היא שקופה ותוכלו להשתמש בה.

ה-CSS פשוט וקל:

.videoborder
{
   background: url('vid_bg.png') no-repeat center;
   height: 408px;
   width: 700px;
   padding-top: 10px;
   text-align: center;
}

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

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

ה-HTML אפילו עוד יותר פשוט:

<p class="videoborder">
   (Use the Youtube Embed code here)
</p>

וזה הכל... פשוט לחבר את כל אלו ביחד. נבדק על IE7, Firefox 3 ו-Chrome. יכול להיות שעובד גם על אחרים.

מה עוד צריך לשפר?

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

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

תהנו.

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

5 תגובות

  1. מצבות | 8/24/2009 10:05:47 AM
    אחלה של רעיון, אני הולך לנסות את זה על האתר שלי. 
  2. איתי | 8/24/2009 11:42:03 PM

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

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

  3. טל | 8/25/2009 9:05:20 AM

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

  4. נחומי | 9/1/2009 5:15:49 AM

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

     אם כן, אשמח לדעת איך לעשות זאת.

    תודה מראש.
    נחומי.

  5. טל | 9/6/2009 11:48:51 AM

    אני משער שזה אפשרי, צריך קצת להבין את מה צריך לערוך. אם אתה מתמצא קצת בתבניות של Wordpress תוכל לעשות זאת.

    תוריד את התמונה של המסגרת מכאן ותעלה אותה לשרת שלך. תחפש את קובץ ה-CSS שלך (אצלך זה style.css) תערוך אותו ותכניס את קטע ה-CSS כפי שמופיע במדריך.

    בשלב האחרון צריך שבכל פעם שאתה מוסיף קטע וידאו, הוא יהיה בתוך פיסקה(p) או div עם ה-class המתאים (videoborder). את החלק הזה אני לא יודע לעשות בוורדפרס ותצטרך להתגבר עליו לבד. אני משער שהעורך של וורדפרס מספק אופציה כזאת.

התגובות נעולות