v2.5.2
Giriş yap

Resme tıklayınca yt iframe gösterme resmi saklama nasıl yapabilirim?

bukr3j
265 defa görüntülendi ve 1 kişi tarafından değerlendirildi
1 1

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>
html javascript jquery
Cevap yaz
Cevaplar (1)
hasanablak
1006 gün önce
<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>
0
#009054