Teşekkür ederim biraz isteğim doğrultusunda yaptım fakat şöyle bir sorunla karşılaştım video açıkkenki arkaplanın oppacity değerini ayarlayınca video da o oppacity değerine sahip oluyor. Bunu nasıl düzeltebilirim yardımcı olursanız sevinirim.





HTML Canvas Flag Wave

<script>
function kapat(id) {
id.style.display = 'none';
document.getElementById('player');
stopVideo();
}
function ac(id) {
document.getElementById(id).style.display = 'block';
stopVideo();
}
</script>




<script>
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
});
}

function stopVideo() {
player.stopVideo();
}
</script>






monder33 adlı üyeden alıntı

Bu iş için ille de Jquery kullanmak gerkemez asıl oöenmli olan Youtube API'sini anlamak.

https://developers.google.com/youtube/iframe_api_reference

Birde basit bir örnek yaptım biraz incelersen projene uyarlayabilirsin, takıldığın bir yer olursa buralardayım.

Kolay gelsin.





HTML Canvas Flag Wave

<script>
function kapat(id) {
id.style.display = 'none';
document.getElementById('player')
}
function ac(id) {
document.getElementById(id).style.display = 'block';
stopVideo();
}
</script>




<script>
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
});
}

function stopVideo() {
player.stopVideo();
}
</script>