تعلم البلوجر هكركوز الكويت: كود للبلوجر وضع اليوتيوب youtube

الاثنين

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

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

حطه وين ما تبي وتغير فقط 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>