كيفية عرض فيديو في نافذة تسجيل الدخول العصرية؟

الدعم
1

@meghna شكراً لك على هذه المكونات!
تعمل كما هو متوقع على سطح المكتب، ولكن
الفيديو (قناة يوتيوب) لا يظهر على الهاتف المحمول (متصفحات كروم وإيدج) على آيفون XR (على الأقل).
أي أفكار حول كيفية إصلاح هذا؟
شكراً لك!
ملاحظة: في لقطة الشاشة، يجب أن تكون المساحة الفارغة فوق زر تسجيل الدخول خاصة بالفيديو…

IMG_2966.PNG
IMG_2966.PNG828×1792 117 KB

إعجاب واحد (1)
2

تم الحل عن طريق تضمين الفيديو من يوتيوب بتغيير HTML قليلاً.
ساعدت إضافة CSS في عرض الفيديو على الهاتف المحمول.

إعجابَين (2)
3

هل يمكنك مشاركة اختراقك هنا؟

إعجابَين (2)
4

@tobiaseigen بالتأكيد!
HTML داخل المكون في حالتي (انتبه إلى “EMBED” في رابط يوتيوب):

<p>انضم حصريًا إلى StarCohort، وسر في مسار EuroTiger الخاص بـ UA، بتزامن عالمي 🌍. قم بالتوسع تاليًا.</p>
<p class="center-aligned-element">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/QKLAKLp7bDw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>

CSS (الصق داخل المكون)، في حالتي:

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* نسبة عرض إلى ارتفاع 16:9 */
    padding-top: 30px; /* بعض الهامش في الأعلى لتجنب تداخل المحتوى */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

آمل أن يساعد هذا شخصًا ما)

3 إعجابات