صندوق عرض الفيديوهات بداخل المواضيع لقوالب بلوجر

تركيب صندوق عرض الفيديوهات بداخل المواضيع لقوالب بلوجر

 استخدام صندوق عرض الفيديوهات داخل المواضيع 

هي حركة ذكية، بل كمان بترفع من جودة المحتوى وتعزز تجربة الزائر! تعال شوف الفوائد بشكل مبسط ولطيف :

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

و سيجعل الموضوع اجمل و افضل بدلا من ان يكون هنا عدد كبير من الفيدوهات داخل الموضوع الزائر سيجد الفيديوهات بجانب بعضهم و سيجعل القارئ يقضي وقت أطول في مدونتك،

و هذا الامر سيرفع من ترتيبك في محركات البحث.

 الفوائد تركيب صندوق عرض الفيديوهات داخل المواضيع 

• زيادة التفاعل : الفيديوهات تخلي المحتوى أكثر حيوية وسهل الفهم.
• تحسين تجربة المستخدم : الزائر يلاقي المعلومة بطريقة مرئية وسريعة.
• تقليل معدل الارتداد : الزائر يقعد أطول لأنه بيتابع الفيديو.
• دعم المحتوى النصي : الفيديو بيكمل التدوينة ويوضح النقاط بشكل أعمق.

طريقة تركيب صندوق عرض الفيديوهات

نذهب الى المظهر ثم اختيار تعديل HTML  ثم نبحث عن <head/>  و نضيف الأكواد التالية اعلاها

<style>

#vplaylist-container{width:100%}

#vplaylist-in{position:relative;background-color:#000;display:flex;flex-direction:row-reverse;gap:10px;height:460px;padding:10px;border-radius:4px;direction:rtl}

#vplaylist-in *{box-sizing:border-box}

#vplaylist-video{width:100%;flex-grow:1}

#vplaylist-video iframe{width:100%;height:100%;border-radius:4px}

#vplay-cont{order:1;flex-shrink:0;position:relative}

#vplaybtn{background-color:#FF0033;width:45px;height:45px;border-radius:50%;color:white;font-size:22px;font-weight:bold;position:absolute;left:-26px;transform:translateX(-50%);top:20px;border:2px solid white;transition:all 0.3s ease;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;box-shadow:0 2px 10px rgba(0,0,0,0.2);top:6px}

#vplaybtn .vbtnclose,#vplaybtn .vbtnopen{transition:all 0.3s}

#vplay-cont #vplaybtn .vbtnopen,#vplay-cont.activevplay #vplaybtn .vbtnclose{display:none}

#vplay-cont #vplaybtn .vbtnclose,#vplay-cont.activevplay #vplaybtn .vbtnopen{display:block}

#vplay-cont.activevplay #vplaybtn{border-radius:50%;top:0}

#vplay-cont.activevplay #vplaylist-list{opacity:0;visibility:hidden;width:0;padding:0}

#vplaylist-list{width:230px;background-color:#222;padding:15px;overflow-y:auto;border-radius:8px;display:flex;flex-direction:column;gap:8px;height:100%;transition:all 0.4s ease;box-shadow:inset 0 0 10px rgba(0,0,0,0.5)}

#vplaylist-list > div > b{display:none}

#vplaylist-list > div{height:36px;display:flex;flex-shrink:0;align-items:center;cursor: pointer;border-radius:4px;overflow:hidden;padding:0 10px;transition:all 0.2s;color:#dbdbdb;background:#dbdbdb1c}

#vplaylist-list > div:hover,#vplaylist-list > div.active-video{color:#fff;background-color:rgba(255,0,51,0.7);transform:translateX(-5px)}

@media screen and (max-width:800px){#vplaylist-in{height:360px}}

@media screen and (max-width:650px){#vplaylist-in{height:300px}#vplay-cont #vplaylist-list{opacity:0;visibility:hidden;width:0;padding:0;position:absolute;right:0;top:0;height:100%;background:#fff;z-index:5}#vplay-cont.activevplay #vplaylist-list{opacity:1;visibility:visible;width:200px;padding:10px}#vplaybtn{border-radius:50%;top:0}#vplay-cont.activevplay #vplaybtn{border-radius:4px 0 0 4px;top:20px}#vplay-cont #vplaybtn .vbtnopen,#vplay-cont.activevplay #vplaybtn .vbtnclose{display:block}#vplay-cont #vplaybtn .vbtnclose,#vplay-cont.activevplay #vplaybtn .vbtnopen{display:none}}

</style>

ثم نبحث عن </body>  و نضيف الأكواد التالية اعلاها و نقوم بالحفظ

<script>

document.addEventListener('DOMContentLoaded', function() {

  const videoItems = document.querySelectorAll('#vplaylist-list > div');

  const videoFrame = document.getElementById('video-frame');

  const playButton = document.getElementById('vplaybtn');

  const playList = document.getElementById('vplaylist-list');

  const playContainer = document.getElementById('vplay-cont');

  function extractVideoId(url) {

    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;

    const match = url.match(regExp);

    return (match && match[2].length === 11) ? match[2] : null;

  }

  function loadVideo(videoUrl, item) {

    videoItems.forEach(i => i.classList.remove('active-video'));

    

    item.classList.add('active-video');

    const videoId = extractVideoId(videoUrl);

    if (videoId) {

      videoFrame.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;

    }

  }

  

  if (videoItems.length > 0) {

    const firstVideoUrl = videoItems[0].querySelector('b').textContent;

    loadVideo(firstVideoUrl, videoItems[0]);

  }

  videoItems.forEach(item => {

    item.addEventListener('click', function() {

      const videoUrl = this.querySelector('b').textContent;

      loadVideo(videoUrl, this);

    });

  });

  playButton.addEventListener('click', function() {

    playContainer.classList.toggle('activevplay');

  });

  document.addEventListener('click', function(e) {

    if (window.innerWidth <= 650 && 

        !playContainer.contains(e.target) && 

        e.target !== playButton) {

      playContainer.classList.add('activevplay');

    }

  });

});

</script>

و الان لاضافة الصندوق نذهب الى الموضوع و نقوم بالتحويل الى HTML و نضع الكود التالي في المكان المناسب

<div id="vplaylist-container">  

  <div id="vplaylist-in">  

    <div id="vplay-cont">

      <button id="vplaybtn">

        <span class="vbtnclose">✕</span>

        <span class="vbtnopen">☰</span>

      </button>  

      

      <div id="vplaylist-list">

        <div><b>https://www.youtube.com/watch?v=AEyZtZXzasg</b><span>الفيديو الأول</span></div>

        <div><b>https://www.youtube.com/watch?v=sOWO-XJXHGI</b><span>الفيديو الثاني</span></div>

        <div><b>https://www.youtube.com/watch?v=CdfqW83JaeM</b><span>الفيديو الثالث</span></div>

        <div><b>https://www.youtube.com/watch?v=Mhf4UdrjN0g</b><span>الفيديو الرابع</span></div>

        <div><b>https://www.youtube.com/watch?v=k1QcCsPJAOc</b><span>الفيديو الخامس</span></div>

      </div>

    </div>  

    

    <div id='vplaylist-video'>

      <iframe id="video-frame" width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    </div>

  </div>

</div>

التعديلات 

ستجد بداخل الكود روابط للفيدو مثل هذا  

<div><b>https://www.youtube.com/watch?v=AEyZtZXzasg</b><span>الفيديو الأول</span></div>

قم بتغير الرابط باللون الاحمر برابط الفيديو الخاص بك

و ثم قم بالحفظ ومبروك الاضافة

تحرير المقال