تعريفه
بشكل عام نستخدم الوسم <embed>
لعرض محتوى خارجي في الصفحة, هذا المحتوى يمكن أن يكون صورة, فيديو, تطبيق أو إضافة ( Plug-in ) يمكن تثبيتها في المتصفح.
عند عرض المحتوى بواسطة هذا الوسم يجب تحديد بعض الخصائص الأساسية له كمساره, نوعه, طوله و عرضه في الصفحة كالتالي.
<embed type="content-type"
src="source-path"
width="width-value"
height="height-value">
- مكان الكلمة
content-type
نمرر نوع المحتوى الذي سيتم عرضه في المتصفح.
- مكان الكلمة
source-path
نمرر مسار المحتوى الذي سيتم عرضه.
- مكان الكلمة
width-value
نمرر عرض المساحة التي سيتم تخصيصها لعرض المحتوى في الصفحة.
- مكان الكلمة
height-value
نمرر طول المساحة التي سيتم تخصيصها لعرض المحتوى في الصفحة.
معلومة تقنية
القيم التي تضعها للخاصيتين type
و src
تعطيك إياها المصادر التي تريد عرضها في الصفحة جاهزةً.
بينما الخاصيتين width
و height
فأنت من يجب أن يحددهما حتى يتم عرض المحتوى بشكل مناسب في الصفحة.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <embed>
.
Chrome |
Edge |
Firefox |
Opera |
Safari |
Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم |
12 |
1 |
مدعوم |
مدعوم |
مدعوم |
مدعوم |
4 |
؟ |
؟ |
مدعوم |
خصائصه
الخاصية src
نضيفها للوسم لتحديد مسار المحتوى المراد عرضه في الصفحة.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome |
Edge |
Firefox |
Opera |
Safari |
Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم |
12 |
1 |
مدعوم |
مدعوم |
مدعوم |
مدعوم |
4 |
؟ |
؟ |
مدعوم |
الخاصية type
نضيفها للوسم لتحديد نوع المحتوى المراد عرضه في الوسم بأسلوب MIME و هذا الأمر يمكنك فعله بشكل إختياري لأنه غير ضروري.
كمثال بسيط, إذا أردت الإشارة إلى أن الرابط الموضوع يشير لملف CSS يمكنك إضافة الخاصية type="text/css"
للوسم.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome |
Edge |
Firefox |
Opera |
Safari |
Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم |
12 |
1 |
مدعوم |
مدعوم |
مدعوم |
مدعوم |
4 |
؟ |
؟ |
مدعوم |
الخاصية height
نضيفها للوسم لتحديد كم سيكون طول المساحة في الصفحة التي سيتم فيها عرض المحتوى.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome |
Edge |
Firefox |
Opera |
Safari |
Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم |
12 |
1 |
مدعوم |
مدعوم |
مدعوم |
مدعوم |
4 |
؟ |
؟ |
مدعوم |
الخاصية width
نضيفها للوسم لتحديد كم سيكون عرض المساحة في الصفحة التي سيتم فيها عرض المحتوى.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome |
Edge |
Firefox |
Opera |
Safari |
Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم |
12 |
1 |
مدعوم |
مدعوم |
مدعوم |
مدعوم |
4 |
؟ |
؟ |
مدعوم |
إستخدامه
في المثال التالي قمنا بتضمين الصفحة الرئيسية في موقع هرمش بداخل الصفحة.
المثال الأول
<embed
width="500"
height="400"
src="https://harmash.com"
type="text/html">
جرب الكود
في المثال التالي قمنا بتضمين فيديو موجود في يوتيوب بداخل الصفحة.
ملاحظة: الخصائص frameborder
و allow
و allowfullscreen
هي خصائص من إعداد يوتيوب و ليست من خصائص لغة HTML.
المثال الثاني
<embed
width="560"
height="315"
src="https://www.youtube.com/embed/bfaPnlYE8Jo"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
جرب الكود
معلومة
أي فيديو تجده في يوتيوب يمكنك عرضه بكل سهولة بداخل الصفحة بدون الحاجة لكتابة أي كود بنفسك حيث أن يوتيوب يوفر لك خيار إسمه تضمين ( Embed ) بمجرد النقر عليه يعطيك كود إطار يعرض الفيديو.
لتجد خيار التضمين ( Embed ) أنقر على زر المشاركة ( Share ) الذي تجده تحت الفيديو و سيظهر لك.
بعدها أنقر عليه حتى يعطيك الكود الذي يمكنك نسخه و وضعه في الصفحة.
ملاحظة: يوتيوب يعطيك الكود بداخل وسم <iframe>
و لكن يمكنك وضعه بداخل وسم <embed>
إذا أردت كما فعلنا في المثال السابق.
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
embed:focus {
outline: none;
}
نصائح و ملاحظات
على الرغم من أنه يمكنك استخدام الوسم <embed>
لعرض أي محتوى في الصفحة إلا أنه يفضّل:
- عرض الصور باستخدام الوسم
<img>
لأنه مخصص لذلك.
- عرض الصوتيات باستخدام الوسم
<audio>
لأنه مخصص لذلك.
- عرض الفيديوهات باستخدام
<video>
لأنه مخصص لذلك.
- عرض الصفحات الأخرى باستخدام
<iframe>
لأنه مخصص لذلك.