كود للبلوجر وضع اليوتيوب youtube

عدد المشاهدات الان

 حطه وين ما تبي وتغير فقط 3fXqzkFnXz4 بالسطر الاول ويمكنك تغير الصوره وتكبير الحجم لفيديو

برمجه labnol

الكود

<div class="youtube-player" data-id="3fXqzkFnXz4" />

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-hMsazPazOIAJS35UVv_05KxH0_fpCySwYvFz-eFU1bYvtd3butAB-dY5LRNRhSsV_gniohml-SQS_f2t4wd1-sXnZbJ2jz5FvSOaf2v_L-vz7Bu7hU61HsWGS54M-yWDzP0Gp3TuJ_Xy/s16000/play-button.png") no-repeat;

  cursor: pointer;

}

</style>

<script type='text/javascript'>

//<![CDATA[

/* Light YouTube Embeds by @labnol */

/* Web: https://www.labnol.org/ */

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisBiDcw6_wphktRk-9Rom5nZ0_7QhU7qpWcAuuJN6pk7K9Vl6vA2bs4t8ETgh10ae9NS_f2RAenTbCZpJ5ivSPJK6hG5qlAPWvEqZ1qoLkpDdjr2iWlKxG9HesEDX6vKtLVz-fQk1VZuHv/s400/Foreigners-and-Arabs2.gif".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>

وسلامتكم

اذا حبيت نسخ المقالهـ