amp-youtube
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.
Description
Displays a YouTube video.
Required Scripts
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Supported Layouts
يعرض المكّوِن فيديو YouTube.
| النص البرمجي المطلوب | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script> |
| التنسيقات المعتمدة | fill وfixed وfixed-height وflex-item وnodisplay وresponsive |
| أمثلة | مثال توضيحي لترميز amp-youtube |
[جدول المحتويات]
مثال
باستخدام التنسيق المتجاوب، يجب أن يوفر العرض والارتفاع الواردين في المثال تنسيقات مناسبة للفيديوهات التي تبلغ نسبة العرض إلى الارتفاع لها 9:16:
<amp-youtube
data-videoid="mGENRKrdoGY"
layout="responsive"
width="480" height="270"></amp-youtube>
<amp-youtube
id="myLiveChannel"
data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
width="358"
height="204"
layout="responsive">
<amp-img
src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
placeholder
layout="fill"
/>
</amp-youtube>
السمات
| autoplay | في حالة توفّر هذه السمة، وإتاحة المتصفح التشغيل التلقائي:
|
| data-videoid | هذه السمة هي معرّف فيديو YouTube الذي يوجد في عنوان URL لصفحة كل فيديو من فيديوهات YouTube. في عنوان URL هذا مثلاً: https://www.youtube.com/watch?v=Z1q71gFeRqM، معرّف الفيديو هو Z1q71gFeRqM. |
| data-live-channelid | هذه السمة هي معرّف قناة YouTube الذي يوفر عنوان URL مستقرًا للبث المباشر. في عنوان URL هذا مثلا: https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q، معرّف القناة هو UCB8Kb4pxYzsDsHxzBfnid4Q. يمكن توفير data-live-channelid بدلاً من السمة data-videoid لتضمين عنوان URL مستقر للبث المباشر بدلاً من الفيديو. ولا تكون للقناة عناصر نائبة تلقائية بل يمكنك إضافتها إلى الفيديو كما في المثال 2 أعلاه. |
| data-param-* | ستتم إضافة جميع السمات data-param-* كمعامِل طلب بحث إلى السمة src لإطار iframe في YouTube. يمكن استخدام هذا لتمرير قيم مخصصة إلى مكونات YouTube الإضافية، مثل إظهار عناصر التحكم من عدمه. سيتم ترميز معرّف الموارد المنتظم للمفاتيح والقيم. وستتم كتابة المفاتيح بطريقة camelCase.
|
| dock | تتطلب هذه السمة الإضافة amp-video-docking. في حال توفّر هذه السمة وتشغيل الفيديو يدويًا، سيتم "تصغير" الفيديو وتثبيته في زاوية أو عنصر عند تمرير المستخدم إلى خارج المنطقة المرئية لمكّوِن الفيديو. لمزيد من التفاصيل، راجع المستندات المتعلقة بإضافة الإرساء نفسها. |
| credentials (اختيارية) | تعرِّف هذه السمة خيار credentials بالشكل الذي تحدده واجهة برمجة التطبيقات للجلب.
omit. عادةً ما يعمل YouTube على تعيين ملفات تعريف الارتباط له عند تحميل المُشغِل. في وضع تحسين الخصوصية، يتم تعيين ملفات تعريف الارتباط عندما ينقر المستخدِم على المُشغِل. |
| السمات المشتركة | يتضمن هذا العنصر السمات المشتركة التي تشمل مكونات AMP. |
التحقق
اطّلِع على قواعد amp-youtube في مواصفات مدقق AMP.
هل تحتاج إلى مزيد من المساعدة؟
لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.
الذهاب إلى Stack Overflow هل وجدت خطأ أو تفتقد لميزة؟يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.
الانتقال إلى GitHub