Resme tıklayınca yt iframe gösterme resmi saklama nasıl yapabilirim?
Görsle tıkalyınca iframe ile youtube videomu çağırıyorum. Resime tılayınca sadee tıklanan resmin display: none olmasını istiyorum.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="myIframe" width="560" height="315" style="display: none;" src="" frameborder="0" allowfullscreen="autoplay" style="border: 1px solid black;"></iframe>
<br />
<img src="../img/videos/coolazer.webp" width="560" height="315" onclick="$('img').hide();" id="button1" class="myButton" data-video-id="lXtDRrmRhf0"></img>
<img src="../img/videos/coolazer.webp" width="560" height="315" id="button1" class="myButton" data-video-id="KOzeSkLuNJ8"></img>
<img src="../img/videos/coolazer.webp" width="560" height="315" id="button1" class="myButton" data-video-id="kUxzCJ1jxaY"></img>
<img src="../img/videos/coolazer.webp" width="560" height="315" id="button1" class="myButton" data-video-id="IrygBuuwTrE"></img>
<img src="../img/videos/coolazer.webp" width="560" height="315" id="button1" class="myButton" data-video-id="A-G2HQydOFs"></img>
<script>
$(function() {
$(".myButton").on("click", function() {
var videoId = $(this).data('video-id');
var $iframe = $("#myIframe");
$('img').hide();
$iframe.attr("src", "https://www.youtube.com/embed/" + videoId);
$iframe.show();
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br />
<div>
<img src="../img/videos/coolazer.webp" width="560" height="315" id="button1" class="myButton"
data-video-id="lXtDRrmRhf0"></img>
</div>
<div>
<img src="../img/videos/coolazer.webp" width="560" height="315" id="button1" class="myButton"
data-video-id="KOzeSkLuNJ8"></img>
</div>
<div>
<img src="../img/videos/coolazer.webp" width="560" height="315" id="button1" class="myButton"
data-video-id="kUxzCJ1jxaY"></img>
</div>
<div>
<img src="../img/videos/coolazer.webp" width="560" height="315" id="button1" class="myButton"
data-video-id="IrygBuuwTrE"></img>
</div>
<div>
<img src="../img/videos/coolazer.webp" width="560" height="315" id="button1" class="myButton"
data-video-id="A-G2HQydOFs"></img>
</div>
<script>
$(function () {
$(".myButton").on("click", function () {
var videoId = $(this).data('video-id');
$(this).hide();
$(this).parent().append(`
<iframe id="myIframe" width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen="autoplay" style="border: 1px solid black;"></iframe>
`);
});
});
</script>