Jak zakryć obrazek , pusty div

[dominator1]

Witam. Potrzebuję na blogu (blogger) zakryć player youtube czymś... I tu mam dwa pomysły, zakryć przeźroczystym png lub znalazłem gdzieś w internecie drugi sposób
"wystarczy zdjęcie umieścić w div jako tło, albo w img i na to na wyższą warstwę nałożyć pustego diva, nadać mu odpowiednie rozmiary i w ten sposób zakryć zdjęcie przeźroczystą tarczą ochronną przed ściąganiem"

Nie wiem jak to zrobić, proszę o jakiś przykładowy kod...

[Kartofelek]

Czekaj. Chcesz w taki sposób zablokować możliwość ściągania obrazków ze swojej strony?

Kod:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
   $('.main-content img').each(function() {
       $(this).wrap('<div class="img-overflow"></div>');
   });
   $('.img-overflow').append('<img class="over" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />');
});
</script>

style:

Kod:

.img-overflow {position:relative; display:inline-block;}
.img-overflow img {position:relative; z-index:0; display:inline-block;}
.img-overflow img.over {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}

main-content to twoj kontent. Pewnie nie chcesz WSZYSTKICH obrazków tak zablokować.

Ale ogólnie możesz od razu sobie dać spokój, bo jedyna pewna metoda to nie umieszczanie strony w necie

[dominator1]

W sumie problem rozwiązałem czymś takim, ale mam kolejne pytanie
<div style="height: 500px; width: 700px;">
player youtube

</div>
<div style="height: 506px; margin-top: -500px; width: 700px;">
zdjęcie png przeźroczyste nad playerem

Teraz chciał bym aby to przeźroczyste zdjęcie całkowicie znikało lub przesuwało się w dół strony po np 5 minutach Da się to zrobić w jakiś prosty sposób?

[Kartofelek]

Kod:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
setTimeout(function() {
   $('.magiczne-zdjecie').remove();
}, 5000);
</script>

Używaj klas

[dominator1]

Kod:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
setTimeout(function() {
   $('.magiczne-zdjecie').remove();
}, 5000);
</script>

Używaj klas

Mógł byś wyjaśnić o co w tym chodzi? Tzn dzięki temu zdjęcie zniknie? Podaj jakiś przykładowy pełny kod na moim poprzednim przykładzie. Czyli player youtube a nad nim magiczne zdjęcie które znika

[Kartofelek]

Nie za bardzo mogę. Właśnie włączył mi się leń.

[dominator1]

Nie za bardzo mogę. Właśnie włączył mi się leń.

No proszę

[prawdziwypiotrek]

Nie baw się tak. Wstaw zwykły obrazek z atrybutem typu data-youtube zawierającym ID filmu i skorzystaj z API:

https://developers.google.com/youtube/iframe_api_reference
https://developers.google.com/youtube/js_api_reference#Embedding

Masz tam działające przykłady - uruchom je sobie i zobacz W momencie kliknięcia na obrazku będziesz musiał załadować playerek o podanych wymiarach i ID.