الخطوة الأولى :

ابدأ بإنشاء عنصر h1 باستخدام النص "إطار iframe لعرض الفيديو".

الكود :

code 

<h1>إطار iframe لعرض الفيديو</h1>
	

معاينة :

الخطوة الثانية :

الآن، أنشئ عنصر iframe. لا تضع أي شيء فيه بعد.

الكود :

code 

<h1>إطار iframe لعرض الفيديو</h1>
		
<iframe>
</iframe>
	

معاينة :

الخطوة الثالثة :

في الدرس الأول عن عنصر iframe، تعلمت أنه عنصر مُستبدل تمامًا مثل img. هذا يعني أنه يمكنه أيضًا استخدام خاصيتي العرض width والارتفاع height لتحديد طوله وعرضه.

اضبط عرض width عنصر iframe على 560 وارتفاع height 315.

الكود :

code 

<h1>إطار iframe لعرض الفيديو</h1>
		
<iframe width="560" height="315">
</iframe>
	

معاينة :

الخطوة الرابعة :

يأخذ عنصر iframe أيضًا سمة src بقيمة تشير إلى عنوان URL أو مسار path المورد المراد عرضه.

أضف سمة المصدر src التالية : https://www.youtube.com/embed/I0_951_MPE0 إلى عنصر iframe.

في هذه المرحلة، سيظهر الفيديو على الصفحة، ولكن هناك بعض السمات الإضافية more attributes التي تحتاج إلى إضافتها.

الكود :

code 

<h1>إطار iframe لعرض الفيديو</h1>
		
<iframe 
	width="560" 
	height="315"
	src="https://www.youtube.com/embed/I0_951_MPE0"
	>
</iframe>
	

معاينة :

الخطوة الخامسة :

إحدى السمات هي "السماح" allow. وهي أشبه بقائمة أذونات permission list تُعلم المتصفح بالميزات features المسموح للإطار المضمن iframe باستخدامها.

إليك مثال عنص iframe مع سمة allow :

Example Code

<iframe
  allow="accelerometer autoplay clipboard-write encrypted-media gyroscope picture-in-picture web-share"
></iframe>
	

أضف سمة "السماح" allow مع قيم "مقياس التسارع" accelerometer و"التشغيل التلقائي" autoplay و"كتابة الحافظة" clipboard-write.

يتيح مقياس التسارع accelerometer للإطار المضمن iframe استخدام مستشعرات الحركة motion sensors لاكتشاف أمور مثل إمالة الجهاز ودورانه device tilting and rotation. يتيح التشغيل التلقائي autoplay بدء تشغيل الفيديو تلقائيًا automatically، بينما يتيح الكتابة بالحافظة clipboard-write للإطار المضمن iframe كتابة البيانات data إلى حافظة المستخدم user’s clipboard.

الكود :

code 

<h1>إطار iframe لعرض الفيديو</h1>
		
<iframe 
	width="560" 
	height="315"
	src="https://www.youtube.com/embed/I0_951_MPE0"
	allow="accelerometer autoplay clipboard-write"
	>
</iframe>
	

معاينة :

الخطوة السادسة :

أضف "الوسائط المشفرة" encrypted-media، و"الجيروسكوب" gyroscope، و"مشاركة الويب" web-share إلى القيم values الموجودة في سمة attribute "السماح" allow.

ستتيح هذه الإضافات الثلاثة استخدام ملحقات الوسائط المشفرة encrypted media extensions لحماية الفيديو، والسماح للإطار المضمّن iframe بالظهور في وضع "صورة داخل صورة" picture-in-picture mode عند الحاجة، ومشاركة محتوى الإطار المضمّن iframe عبر مربعات حوار المشاركة الأصلية للجهاز the device's native share dialogs.

الكود :

code 

<h1>إطار iframe لعرض الفيديو</h1>
		
<iframe 
	width="560" 
	height="315"
	src="https://www.youtube.com/embed/I0_951_MPE0"
	allow="accelerometer autoplay clipboard-write encrypted-media gyroscope web-share"
	>
</iframe>
	

معاينة :

الخطوة السادسة :

السمة التالية التي ستضيفها هي referrerpolicy. وهي القاعدة rule التي تحدد مقدار التفاصيل التي تشاركها عند اتصال صفحتك بصفحة أخرى.

أضف سمة referrerpolicy واضبطها على strict-origin-when-cross-origin. تُشارك هذه السمة العنوان الكامل full address على نفس الموقع، واسم الموقع فقط على المواقع الأخرى، ولا شيء على المواقع غير الآمنة insecure sites.

الكود :

code 

<h1>إطار iframe لعرض الفيديو</h1>
		
<iframe 
	width="560" 
	height="315"
	src="https://www.youtube.com/embed/I0_951_MPE0"
	allow="accelerometer autoplay clipboard-write encrypted-media gyroscope web-share"
	referrerpolicy="strict-origin-when-cross-origin"
	>
</iframe>
	

معاينة :

الخطوة الأخيرة :

أخيرًا وليس آخرًا، السمة التي ستضيفها هي allowfullscreen. وكما يوحي اسمها، فهي تسمح بمشاهدة الفيديو في وضع ملء الشاشة full screen mode.

الكود :

code 

<h1>إطار iframe لعرض الفيديو</h1>
		
<iframe 
	width="560" 
	height="315"
	src="https://www.youtube.com/embed/I0_951_MPE0"
	allow="accelerometer autoplay clipboard-write encrypted-media gyroscope web-share"
	referrerpolicy="strict-origin-when-cross-origin"
	allowfullscreen
	>
</iframe>
	

معاينة :

وبهذا انتهت الورشة!