עורך טקסט
9. הטמעה באחוזים
על פי רוב כאשר מעתיקים קוד הטמעה גודל הפריים (iframe) שבו יוצג התוכן הוא קבוע.
להטמעת תוכן בגודל קבוע יש מגרעה: כאשר מציגים את הקורס במכשירים שונים (מחשב נייד או סמרטפון). התוכן יכול להיות יותר גדול מהמסך.
גודל פריים הטמעה נחתך במסכים מסויימים.
כדי להמנע מהבעיתיות הזו מומלץ להטמיע את הפריים הפנימי באחוזים. זו פעולה מעט מסובכת מכיוון שלא ניתן לקבוע את הגובה באחוזים.
השיטה היא לפעול באופן הבא:
ליצור div חיצוני ולתת לו את הפרמטרים הבאים
- position: relative
- width: 100%
- padding-top: 50%
- ניתן לשחק באחוזים: width:100% - ממלא את הרוחב של החלון - אפשר להקטין כדי שהתוכן יהיה יותר קטן. padding-top:50% - קובע את היחס בין הרוחב לגובה - במקרה הנוכחי הרוחב יהיה כפול 2 מהגובה.
בתוך ה-div יוצרים את ה-iframe ונותנים לו את התכונות הבאות:
position: absolute
- top: 0
- left: 0
- width: 100%
- height: 100%
<div style="position: relative; width: 100%; padding-top: 50%;">
<iframe style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; " src="https://www.youtube.com/embed/mAZhQQN758g" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe>
</div>
פריים מוטמע מתאים עצמו לגודל המסך