הטמעת סרטון יוטיוב באתרים באופן תואם HTML5

תוכנית השותפים של יוטיוביותר חשוב מעניין ההתאמה ל-HTML5 (יכולת להציג את הסרטונים גם במכשירים מתקדמים כמו IPAD ) הדרך החדשה מאפשרת לנו להסתיר את פקדי הניגון,

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

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

כדי לבצע את ההטמעה יש להשתמש בקוד הבא:

<iframe title="YouTube video player" width="560" height="349" src="http://www.youtube.com/embed/PG9ElY-_o3c?rel=0&amp;hd=1&controls=0&showinfo=0&autoplay=0" frameborder="0" allowfullscreen></iframe>

כדי לשנות את ההגדרות יש לבחור 0 לכיבוי או 1 להפעלה הגדרה כלשהי:

rel – הצגת סרטונים קשורים בסוף הסרטון.

hd – האם להציג את הסרטון באיכות HD.

controls – האם להציג את פקדי הניגון של הסרטון.

showinfo – האם להציג את שם הסרטון.

autoplay – האם להתחיל לנגן את הסרטון באופן אוטומטי.

חשוב מאוד! לא לשכוח להחליף את הקוד של הסרטון לקוד של הסרטון שלכם מיד לאחר המילה embrd.

הקוד שבדוגמא מציג את הסרטון כך:

בהצלחה,

קובי

אודות קובי טריקי

תגובות

21 תגובות ל “הטמעת סרטון יוטיוב באתרים באופן תואם HTML5”
  1. מאת לירן גלר:

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

  2. מאת לירן גלר:

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

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

    להלן הקוד:

    בהצלחה לכולם!

  3. מאת לירן גלר:

    כנראה שקטע הקוד לא עבר בתהליך הוספת התגובה, אז אני מצרף אותו בקישור הבא (בקובץ טקסט):

    http://www.UpFile4u.Net/Files/6u4t4w.txt

  4. מאת קובי טריקי:

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

  5. מאת שלום .א.:

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

    דרך אגב יש פרסומות בסרטונים.

  6. מאת יאיר:

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

  7. מאת קובי טריקי:

    יש להחליף את הפקודה :
    showinfo=0
    עם הפקודה:
    modestbranding=1

  8. מאת יאיר:

    נהדר קובי
    אז תעדכן את זה בקוד שבפוסט

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

  9. מאת יאיר:

    מה לקבי הטמעה בפוסט בוורדפרס?
    זה לא עובד לי גם לא בעורך HTML

  10. מאת יאיר:

    קובי, הקוד שנתת מעלים את הלוג למטהו ובמקום זה באה כיתובית למעלה

  11. מאת קובי טריקי:

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

    קובי

  12. מאת אברהם:

    קובי שלום.
    א- יפה מאוד מאוד ההסבר הפשוט שלך לגבי הקודים של ההטמעה. אם תוכל לתת לנו טיפים נוספים לגבי כמה קודים נוספים הדבר יסייע לנו.
    ב- יש לי באתר למעלה מ-1000 סרטונים של יוטיוב. והם מוצגים בצורה של פלאליסטים שבכל אחד יש בין 10 ל- 50 סרטונים. הבעיה של הפלאליס שבכל נגיעה במסך יוטיוב, הגולש עובד לשם. בדיוק כמו בקוד ההטמעה הישן.
    השאלה היא האם אפשר להטמיע קוד מסויים. על מנת שגם בפלאליסט הגולש לא יעבור ליוטיוב אלא רק בלחיצה "ימינה למטה "WATCH YOU TUB ? אם תפתור לי בעיה זו. פשוט חסכת לי המון שעות של עבודה כיון שאם לא כן אני שוקל להעביר את כל הפלאליסטים לסרטונים בודדים בקוד החדש.
    ג- ברור שבדרך שהצעת עדיין הגולש עובר ליוטיוב בלחיצה ימינה למטה. וכן רואים בסרטון דוגמא ששמת פה באתר. בקוד המציע הגולש "ערן גלר" הדבר נחסם כליל. אך לצערי אסור לעשות זאת על פי ההלכה, וכן לפי הכללים של יוטיוב כפי שמוסבר בסעיף "ף" בכללי שימוש ביוטיוב.
    אודה לתשובה בהקדם אברהם. מאתר "עם ישראל"

  13. מאת קובי טריקי:

    אברהם,
    תודה על הפרגון :)
    שלח לי בבקשה לינק לדף בו יש פלייליסט מדובר וגם את הקוד איתן את משתמש.
    אתה יכול גם למייל info@iboss.co.il
    קובי

  14. מאת אברהם:

    קובי כל הכבוד שאתה עונה מהר. רק לא מזמן נכנסתי לאתר.
    זו דוגמא לדף בו יש פלאליסט
    http://www.am-israel.com/170533/%D7%A4%D7%9C%D7%90%D7%95%D7%AA-%D7%94%D7%91%D7%A8%D7%99%D7%90%D7%94-%D7%98%D7%91%D7%A2

    וזה קוד ההטמעה שאני מקבל מיוטיוב כאשר אני לוחץ על "שתף"

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

  15. מאת אברהם:

    משום מה קוד ההטעמה לא נכנס לשאלה- וזה קוד ההטמעה שאני מקבל מיוטיוב כאשר אני לוחץ על "שתף"

    אברהם

  16. מאת קובי טריקי:

    הי אברהם,
    הבעיה היא שיוטיוב עדיין לא הוציאו נגן מתאים לרשימות סרטונים ולכן הקוד לא עובד.
    בעיקרון את יכול להשתמש בקוד שיש בפוסט, בתוספת /p/ לפני הקוד של הסרטון ולהחליפו בקוד של רשימת הסרטונים.
    דוגמא:
    http://www.youtube.com/embed/p/A260808923AD7BFC
    לאור קהל היעד שלך באתר והרצון לגונן עליהם אני מציע לך להשתמש בנגן מקומי שישאב את הסרטונים מיוטיוב כך תהיה לך שליטה מלאה.
    נסה את הנגן – http://flowplayer.org/

    בהלצחה,
    קובי

  17. מאת יאיר:

    אני ממליץ לך להוסיף פה את התוסף שעושה קישורים בתגובות בחלון חדש
    http://wordpress.org/extend/plugins/target-blank-in-posts-and-comments/

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

  18. מאת יאיר:

    בסוף זה עבד לי – אבל הפך לי את התבנית
    העיף את הסיידבר

  19. מאת worldventures:

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

  20. מאת ירון:

    קובי שלום,

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

    תודה מארש
    ירון

  21. מאת קובי טריקי:

    אתה יכול לקבל אפשרות לתמונות אגודל מוגדרות אישית בחשבון שלך:
    https://support.google.com/youtube/answer/72431?hl=en

    או להשתמש במחולל חיצוני כדי להשתמש בשכבה נוספת של תמנה לפי בחירתך:
    http://www.classynemesis.com/projects/ytembed/

תגובות

ניתן להוסיף תגובות...