اشترك في قناتنا على اليوتيوب للمزيد من الشروحات اشتراك

طريقة إضافة مشغل فيديو يوتيوب في أي مكان على مدونة بلوجر

في هذه التدوينة سوف أشارك معكم طريقة إضافة مشغل فيديو يوتيوب في أي مكان على مدونة بلوجر وفي أي قالب. يمكن إضافة مشغل الفيديو على السايدبار أو الشريط.

تحية طيبة لكل زوار ومحبي موقع جيست ويب. في هذه التدوينة سوف أشارك معكم طريقة إضافة مشغل فيديو يوتيوب في أي مكان على مدونة بلوجر وفي أي قالب.

يمكن إضافة مشغل الفيديو على السايدبار أو الشريط الجانبي للموقع، إضافة جميلة جدا خصوصا لليوتيوبرز وأدعوك لتجربتها.

والشيء المميز في هذه الإضافة أنه يمكنك تحقيق شرط 4000 ساعة بسرعة من خلال هذه الإضافة الت سأشاركها معكم أحبائي.

طريقة إضافة مشغل فيديو يوتيوب في أي مكان على مدونة بلوجر وفي أي قالب

كيفية إضافة مشغل فيديوعلى مدونة بلوجر

أولا تقوم بنسخ الكود التالي :

<div class="youtube-player" data-id="asB_3WzBIjk" />
<style>
.youtube-player {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin: 5px;
}

.youtube-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: transparent;
}

.youtube-player img {
  object-fit: cover;
  display: block;
  left: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  height: auto;
  cursor: pointer;
  -webkit-transition: 0.4s all;
  -moz-transition: 0.4s all;
  transition: 0.4s all;
}

.youtube-player img:hover {
  -webkit-filter: brightness(75%);
  -moz-filter: brightness(75%);
  filter: brightness(75%);
}

.youtube-player .play {
  height: 72px;
  width: 72px;
  left: 50%;
  top: 50%;
  margin-left: -36px;
  margin-top: -36px;
  position: absolute;
   background: url("https://1.bp.blogspot.com/-9WM7CTGFE6w/YEIY4yiXrSI/AAAAAAAAKLA/KQ9KQqUFQ-omzPDInJqiorJHHIVvrSu2QCNcBGAsYHQ/s16000/play-button.png") no-repeat;
  cursor: pointer;
}

</style>
<script type='text/javascript'>
//<![CDATA[
/* Light YouTube Embeds by @jistweb */
/* Web: https://www.jistweb.com/ */

function labnolIframe(div) {
  var iframe = document.createElement("iframe");
  iframe.setAttribute(
    "src",
    "https://www.youtube.com/embed/" + div.dataset.id + "?autoplay=1&rel=0"
  );
  iframe.setAttribute("frameborder", "0");
  iframe.setAttribute("allowfullscreen", "1");
  iframe.setAttribute(
    "allow",
    "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  );
  div.parentNode.replaceChild(iframe, div);
}

function initYouTubeVideos() {
  var playerElements = document.getElementsByClassName("youtube-player");
  for (var n = 0; n < playerElements.length; n++) {
    var videoId = playerElements[n].dataset.id;
    var div = document.createElement("div");
    div.setAttribute("data-id", videoId);
    var thumbNode = document.createElement("img");
    thumbNode.src = "https://i.ytimg.com/vi/ID/hqdefault.jpg".replace(
      "ID",
      videoId
    );
    div.appendChild(thumbNode);
    var playButton = document.createElement("div");
    playButton.setAttribute("class", "play");
    div.appendChild(playButton);
    div.onclick = function () {
      labnolIframe(this);
    };
    playerElements[n].appendChild(div);
  }
}

document.addEventListener("DOMContentLoaded", initYouTubeVideos);

//]]>
</script></div>

بعدها تتوجه إلى واجهة تحكم على بلوجر وتتوجه إلى قسم التنسيق وتبحث عن المكان الذي تريد وضع فيه هذا المشغل.

تضغط على إضافة أداة وتختار html/javascript

بعدها تقوم بلصق الكود الذي قمت بنسخه مسبقا.

الآن تدخل إلى اليوتيوب وتبحث عن الفيديو الذي تريد عرضه على المدونة 

ثم تضغط على مشاركة وتختار تضمين أو Embed

ثم تقوم نسخ الكود الموجود بعد Embed

"youtube.com/embed/asB_3WzBIjk كما هو مبين في الصورة التالية:

ألآن تقوم بلصق الكود في هذا المكان data-id="asB_3WzBIjk على الكود الذي نسخته كما هو مبين في الصورة التالية :


الآن تضغط على حفظ بعد تغيير الكود وتقوم بعمل إعادة تحمل للصفحة وسوف يتم إضافة مشغل فيديو يوتيوب على المدونة الخاصة بك بشكل احترافي وجميل جدا.

إذا لم تفهم هذه الخطوات يمكنك مشاهدة الشرح بالفيديو التالي على اليوتيوب:

في الأخير أتمنى أن ينال الشرح إعجابكم وللمزيد من الإضافات تابع فناتنا على اليوتيوب جيست ويب.

إرسال تعليق