How to Embed YouTube video in jsf page of Adf Application

How to Embed YouTube video in jsf page of Adf Application

إن شاء الله وضحت بتطبيق أرفقته أسفل المشاركة طريقة عرض video تم تحميله على موقع الـ Youtube بمجرد وضع الرابط على الصفحة كما في الصورة المبينة 

عرض video  ضمن الصفحة يتم بإستخدام  iframe HTML tag 
وأهم ما تتطلبه صيغة iframe tag هو تحديد حجم مساحة العرض والصيغة الصحيحة لكتابة الرابط ليعرض الـ video ضمن الصفحة (لتضمينه داخل الصفحة)  وكما سنرى في أدناه عند إستخدامنا لـ iframe tag

بداية علينا معرفة أنه هنالك نوعين من الـvideo  التي يتم تحميلها على موقع الـ Youtube وهي:
 أماvideo  منفرد واحد 
أو video يكون ضمن مجموعة أي بمعنى play list
وإن شاء الله أوضح كيفية العرض للطريقيتن

يتم عمل تطبيق من صفحة واحدة  بتصميم (Panel tab) يضم two tab كما في الصورة أعلاه
كي يكون tab  لعرض فيديو منفرد والـ tab  الآخر لعرض video  من ضمن play list

أولاً: عرض فيديو منفرد

لنفرض لدينا الرابط التالي لفيديو تم تحميله على موقع الـ Youtube

https://www.youtube.com/watch?v=eKpY6DuNajs

لاحظ صيغة الرابط جيداً لأنه سيتم تغييرها حسب متطلبات العرض

الآن المطلوب عرضه ضمن الصفحة 
ندخل على source الصفحة ونكتب الإيعاز التالي ضمن << af:showDetailItem للـ 1tab

<iframe width="653" height="389"

src="https://www.youtube.com/embed/eKpY6DuNajs">

</iframe>

نلاحظ صيغة الـ iframe tag وكيف تم تحديد عرض وإرتفاع مساحة العرض 
المهم بالصيغة هو كيفية كتابة الرابط حيث يتم حذف كلاً من watch?v= وإستبدالها بـ embed/ وباقي تكملة الرابط تنزل كما هي ، كما مبين بصيغة الإيعاز أعلاه  لنحصل على تضمين (embed) الـ video داخل الصفحة وليس مجرد وضع الرابط كما هو (copy و past)

ثانياً: عرض video من ضمن play list

لنفرض لدينا الرابط التالي لـ video من ضمن play list  على موقع الـ Youtube

https://www.youtube.com/watch?v=XfUZggx-dlo&list=PLiw4m3ecyRDjYFmkFj7MBkYbYs8Q33tcH

الآن كما إتفقنا يتم إستبدال كلاً من watch?v=  بــembed/ وباقي تكملة الرابط تنزل كما هي ، لغاية أن نصل إلى @list يتم إستبدالها بـ ?playlist وباقي تكملة الرابط تنزل كما هي فيكون الإيعاز كالآتي
ضمن << af:showDetailItem للـ 2tab

<iframe width="653" height="389"

src="https://www.youtube.com/embed/XfUZggx-dlo?playlist=PLiw4m3ecyRDjYFmkFj7MBkYbYs8Q33tcH">      

 </iframe>

  لتحميل التطبيق إضغط هنا

بالتوفيق إن شاء الله