تك مصراوي - أخبار التكنولوجيا، الكمبيوتر والهواتف الذكية

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

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

بدل ما الصفحة تحمّل 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>