0

طريقة عرض فيديو يوتيوب في بلوجر بدون التأثير على سرعة التحميل

تك مصراوى

اضافة تضمين فيديو يوتيوب فى بلوجر

أداة يوتيوب، بل طريقة برمجية (كود) بيستخدمها المطورون لتسريع تحميل الصفحات.

بدل ما الصفحة تحمّل iframe يوتيوب (اللي تقيل جدًا)، بيتم أولًا عرض صورة مصغّرة فقط.

ولما المستخدم يضغط عليها → يتحول العنصر إلى iframe ويبدأ تشغيل الفيديو

🔹 الاسم الأشهر للكود:

Lazy YouTube Embed

Lazy Load YouTube Video

بالعربي ممكن تسميه:

تضمين يوتيوب البطيء أو تضمين فيديو يوتيوب بالصورة المصغّرة

ليه اسمه "Lazy

لأنه بيأخّر (lazy load) تحميل الفيديو الفعلي (iframe)

إلى أن المستخدم يضغط على الصورة المصغّرة،

وده بيخلي الصفحة أخف وأسرع في التحميل.

غير ID👇 الفيديو هنا فى الاضافة

<"div class="vid" data-embed="_NawcUmQRD0>

دا شكل ID لينك الفيديوعلى حسب تغير الاحرف

https://www.youtube.com/watch?v=s0IEbArPeIM&t=2s

وهنا تغير نفس ID الفيديو عشان تظهر الصور 👇المصغره فى الفيديو

background: #000 url('https://img.youtube.com/vi/_NawcUmQRD0/hqdefault.jpg') center/cover no-repeat;

بعد كتابة المقال وانت فى المقال ادخل على HTML و الصق الكود بعد تغير الروابط الى ذكرت فى المقال ده

<style>
.lzyYT {
  max-width: 560px;
  margin: 20px auto;
  text-align: center;
}
.lzyYT .vid {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  cursor: pointer;
  background: #000 url('https://img.youtube.com/vi/_NawcUmQRD0/hqdefault.jpg') center/cover no-repeat;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .3s ease;
}
.lzyYT .vid:hover {
  transform: scale(1.02);
}
.lzyYT .vid::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #0003;
}
.lzyYT .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: #6e00ffcc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
  transition: .3s;
}
.lzyYT .vid:hover .btn {
  background: #f00;
  transform: translate(-50%, -50%) scale(1.1);
}
</style>

<div class="lzyYT">
  
  <div class="vid" data-embed="_NawcUmQRD0">
    <div class="btn">▶️</div>
  </div>
</div>

<script>
document.addEventListener("click", e => {
  const vid = e.target.closest(".vid");
  if (!vid) return;
  const id = vid.dataset.embed;
  vid.innerHTML = `<iframe src="https://www.youtube.com/embed/${id}?autoplay=1&rel=0"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    style="position:absolute;top:0;left:0;width:100%;height:100%;border-radius:10px">
  </iframe>`;
});
</script>

بلوجر

Mostafa El Sayed

تك مصراوى منصة تقنية عربية تقدم محتوى مبسط وموثوق يساعدك تفهم التكنولوجيا بسرعة وتتعلم مهارات عملية تواكب أحدث التطورات بأسلوب سهل وجذاب يخاطب كل العرب..

مقالات قد تهمك

تعليقات

إرسال تعليق

اكتشف المحتوى بسهولة 🔍 البحث👆