YouTube Embed'de Önerilen Videoları Gizlemek
-
20 Eylül 2022 • 15 dakikalık okuma
Bir html sayfasına YouTube sitesinden bir video embed edildiğinde, video duraklatıldığında ve video sonunda YouTube oynatıcısında alakalı alakasız videolar önerilmektedir.
HideYT eklentisi ile, html sayfaya iframe ile gösterilen YouTube videoları için önerilen videolar gizlenebilir.
YouTube Video Embed
Bir html sayfasına YouTube sitesinden video embed kodu örneği;
Kod
<iframe width="1024" height="576" src="https://www.youtube.com/embed/BMeqj8WG0a8" frameborder="0"></iframe>
Önerilen Videoları Gizleme
Önerilen videoları gizlemek için;
CSS;
Kod
<!-- https://maxl.us/hide-related -->
<style>
.hytPlayerWrap {
display: inline-block;
position: relative;
}
.hytPlayerWrap.ended::after {
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
cursor: pointer;
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-size: 64px 64px;
background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
}
.hytPlayerWrap.paused::after {
content:"";
position: absolute;
top: 70px;
left: 0;
bottom: 50px;
right: 0;
cursor: pointer;
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-size: 40px 40px;
background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}
</style>
HTML;
Kod
<div class="hytPlayerWrapOuter">
<div class="hytPlayerWrap">
<iframe width="1024" height="576" src="https://www.youtube.com/embed/BMeqj8WG0a8?rel=0&enablejsapi=1" frameborder="0"></iframe>
</div>
</div>
JS;
Kod
<script>
"use strict";
document.addEventListener('DOMContentLoaded', function() {
// Activate only if not already activated
if (window.hideYTActivated) return;
// Load API
if (typeof YT === 'undefined') {
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
// Activate on all players
let onYouTubeIframeAPIReadyCallbacks = [];
for (let playerWrap of document.querySelectorAll(".hytPlayerWrap")) {
let playerFrame = playerWrap.querySelector("iframe");
let onPlayerStateChange = function(event) {
if (event.data == YT.PlayerState.ENDED) {
playerWrap.classList.add("ended");
} else if (event.data == YT.PlayerState.PAUSED) {
playerWrap.classList.add("paused");
} else if (event.data == YT.PlayerState.PLAYING) {
playerWrap.classList.remove("ended");
playerWrap.classList.remove("paused");
}
};
let player;
onYouTubeIframeAPIReadyCallbacks.push(function() {
player = new YT.Player(playerFrame, {
events: {
'onStateChange': onPlayerStateChange
}
});
});
playerWrap.addEventListener("click", function() {
let playerState = player.getPlayerState();
if (playerState == YT.PlayerState.ENDED) {
player.seekTo(0);
} else if (playerState == YT.PlayerState.PAUSED) {
player.playVideo();
}
});
}
window.onYouTubeIframeAPIReady = function() {
for (let callback of onYouTubeIframeAPIReadyCallbacks) {
callback();
}
};
window.hideYTActivated = true;
});
</script>
Önerilen Videoları Gizleme Örnek Kodu
Kod
<!DOCTYPE html>
<html lang="tr">
<head>
<title>Önerilen Videoları Gizlemek</title>
<!-- https://maxl.us/hide-related -->
<style>
.hytPlayerWrap {
display: inline-block;
position: relative;
}
.hytPlayerWrap.ended::after {
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
cursor: pointer;
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-size: 64px 64px;
background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
}
.hytPlayerWrap.paused::after {
content:"";
position: absolute;
top: 70px;
left: 0;
bottom: 50px;
right: 0;
cursor: pointer;
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-size: 40px 40px;
background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}
</style>
</head>
<body>
<div class="hytPlayerWrapOuter">
<div class="hytPlayerWrap">
<iframe width="1024" height="576" src="https://www.youtube.com/embed/BMeqj8WG0a8?rel=0&enablejsapi=1" frameborder="0"></iframe>
</div>
</div>
<script>
"use strict";
document.addEventListener('DOMContentLoaded', function() {
// Activate only if not already activated
if (window.hideYTActivated) return;
// Load API
if (typeof YT === 'undefined') {
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
// Activate on all players
let onYouTubeIframeAPIReadyCallbacks = [];
for (let playerWrap of document.querySelectorAll(".hytPlayerWrap")) {
let playerFrame = playerWrap.querySelector("iframe");
let onPlayerStateChange = function(event) {
if (event.data == YT.PlayerState.ENDED) {
playerWrap.classList.add("ended");
} else if (event.data == YT.PlayerState.PAUSED) {
playerWrap.classList.add("paused");
} else if (event.data == YT.PlayerState.PLAYING) {
playerWrap.classList.remove("ended");
playerWrap.classList.remove("paused");
}
};
let player;
onYouTubeIframeAPIReadyCallbacks.push(function() {
player = new YT.Player(playerFrame, {
events: {
'onStateChange': onPlayerStateChange
}
});
});
playerWrap.addEventListener("click", function() {
let playerState = player.getPlayerState();
if (playerState == YT.PlayerState.ENDED) {
player.seekTo(0);
} else if (playerState == YT.PlayerState.PAUSED) {
player.playVideo();
}
});
}
window.onYouTubeIframeAPIReady = function() {
for (let callback of onYouTubeIframeAPIReadyCallbacks) {
callback();
}
};
window.hideYTActivated = true;
});
</script>
</body>
</html>
Kaynaklar
- How To Hide Related Videos In YouTube Embeds (in 2022) , maxlaumeister.com, 20.09.2022 tarihinde alındı.
- YouTube Player Demo , developers.google.com, 20.09.2022 tarihinde alındı.
Beğen