איך להטמיע סרטון יוטיוב באתר - המדריך המלא
הטמעת סרטון יוטיוב באתר מאפשרת להציג וידאו ישירות בתוך העמוד, בלי לשלוח את הגולשים ליוטיוב. במדריך המלא נעבור על הדרך הידנית להוצאת הקוד מיוטיוב, על הבעיה של סרטון שלא מתאים את עצמו למסך, ועל אפשרויות שימושיות כמו מצב פרטיות וזמן התחלה, ובסוף נראה איך ליצור את הקוד בכמה שניות בעזרת הכלי שלנו.
הדרך הידנית: כפתור השיתוף של יוטיוב
- פותחים את הסרטון ביוטיוב ולוחצים על "שיתוף" (Share) מתחת לנגן.
- בוחרים באפשרות "הטמעה" (Embed).
- מעתיקים את קוד ה-iframe שמופיע בחלון.
- מדביקים את הקוד ב-HTML של האתר, במקום שבו רוצים שהסרטון יופיע.
הבעיה הנפוצה: הסרטון לא מתאים את עצמו למסך
הקוד שיוטיוב נותן כולל רוחב וגובה קבועים (למשל 560 על 315), ולכן הסרטון נחתך או חורג מהעמוד במסכים צרים, במיוחד בטלפון. הפתרון הוא לעטוף את ה-iframe במעטפת רספונסיבית ששומרת על יחס 16:9: עוטפים את הסרטון ב-div עם ריפוד תחתון של 56.25% ומיקום מוחלט של ה-iframe, וכך הוא מתרחב ומתכווץ עם רוחב העמוד.
מצב פרטיות: הטמעה בלי קוקיז
יוטיוב מציעה דומיין הטמעה מיוחד, youtube-nocookie.com, שלא מטמיע קוקיז מעקב עד שהמשתמש מנגן את הסרטון בפועל. שימוש בדומיין הזה מקטין את איסוף הנתונים על המבקרים, ומתאים לאתרים ששמים דגש על פרטיות.
התחלה מזמן מסוים והסתרת סרטונים מומלצים
אפשר להוסיף לקוד ההטמעה זמן התחלה (פרמטר start בשניות), כך שהסרטון יתחיל מנקודה מסוימת. אפשר גם להוסיף rel=0 כדי לצמצם סרטונים מומלצים בסוף - אך חשוב לדעת שיוטיוב כבר לא מסתירה אותם לגמרי, אלא מציגה סרטונים מאותו ערוץ במקום סרטונים מערוצים אחרים.
הדרך המהירה: מחולל קוד ההטמעה
כדי לדלג על כל השלבים הידניים ועל העריכה של הקוד, אפשר להשתמש במחולל קוד ההטמעה לסרטון יוטיוב של In4U: מדביקים קישור, מסמנים "רספונסיבי" ו"מצב פרטיות", ומקבלים קוד מוכן - בלי לגעת ב-HTML.
שאלות ותשובות
איך מטמיעים סרטון יוטיוב באתר?
לוחצים על "שיתוף" ואז "הטמעה" ביוטיוב, מעתיקים את קוד ה-iframe ומדביקים אותו ב-HTML של האתר. לקוד רספונסיבי מוכן אפשר להשתמש במחולל קוד ההטמעה.
איך גורמים לסרטון יוטיוב להיות רספונסיבי?
עוטפים את ה-iframe במעטפת עם יחס 16:9 (ריפוד תחתון 56.25% ומיקום מוחלט), כך שהסרטון מתאים את עצמו לכל רוחב מסך.
עוד כלי הטמעה של In4U: קוד הטמעה לסרטון יוטיוב · הטמעת מפה באתר · העלאת תמונות.
כתיבת תגובה