Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
lostyazilim
tr.link

YouTube video maskeleme

 10 Mesajlar 1.138 Okunma
lstbozum
tr.link

#1
bedaze bedaze livetvworld.net Kullanıcı
  • Üyelik 27.08.2013
  • Yaş/Cinsiyet 44 / E
  • Meslek elektrikçi
  • Konum Ankara
  • Ad Soyad Ş** T**
  • Mesajlar 16
  • Beğeniler 4 / 3
  • Ticaret 0, (%0)

Arkadaşlar canlı tv siteme youtubeden canlı yayın çekiyorum. Siteme gelen ziyaretçiler youtubeden çektiğim canlı yayını izlerken video üzerindeki video linkine yada youtube logosuna tıklayıp direk youtube gidiyorlar.

Video üzerindeki bu tıklanabilir yerler gözüksün ama tıklanamaz olsun yani videonun youtube videosu belli olsun ama video üzerindeki kontrollerin hiçbirine tıklanmasın izleyen kişi youtube gidemesin. bu şekilde bi ayar yapmak mümkün mü bazı sitelerde gördüm yapmışlar bu şekilde aşağıda örnek linki koydum . Bilen arkadaşlar yardımcı olabilir mi? Saygılar.

https://sonuscomplete24.com/video.php?aff=[AFFILIATE]

https://fatburningfingerprint.com/digistore/lander/

 

 

wmaraci
reklam

#2
OFffLaZZzz OFffLaZZzz WM Aracı Kullanıcı
  • Üyelik 16.06.2023
  • Yaş/Cinsiyet 40 / E
  • Meslek Esnaf
  • Konum Trabzon
  • Ad Soyad M** K**
  • Mesajlar 28
  • Beğeniler 10 / 13
  • Ticaret 0, (%0)

bedaze adlı üyeden alıntı

Arkadaşlar canlı tv siteme youtubeden canlı yayın çekiyorum. Siteme gelen ziyaretçiler youtubeden çektiğim canlı yayını izlerken video üzerindeki video linkine yada youtube logosuna tıklayıp direk youtube gidiyorlar.

Video üzerindeki bu tıklanabilir yerler gözüksün ama tıklanamaz olsun yani videonun youtube videosu belli olsun ama video üzerindeki kontrollerin hiçbirine tıklanmasın izleyen kişi youtube gidemesin. bu şekilde bi ayar yapmak mümkün mü bazı sitelerde gördüm yapmışlar bu şekilde aşağıda örnek linki koydum . Bilen arkadaşlar yardımcı olabilir mi? Saygılar.

https://sonuscomplete24.com/video.php?aff=[AFFILIATE]

https://fatburningfingerprint.com/digistore/lander/

Evet, böyle bir ayar yapmanız mümkün. YouTube video oynatıcısının üzerindeki kontrol düğmelerine tıklanmasını engellemek için bazı yöntemler kullanabilirsiniz. İşte bir örnek:

 

<!DOCTYPE html>
<html>
<head>
    <title>Canlı Yayın</title>
</head>
<body>
    <div style="position: relative;">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
        <a href="https://www.youtube.com/watch?v=VIDEO_ID" target="_blank" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;"></a>
    </div>
</body>
</html>

Yukarıdaki HTML kodu, bir <iframe> kullanarak YouTube video oynatıcısını içerir. Ardından <a> etiketiyle video üzerine tam ekran şeklinde kaplayan bir bağlantı eklenir. Bu bağlantı, videoyu açmak için normalde tıklanabilecek alana yerleştirilir, ancak target="_blank" özelliği sayesinde yeni bir tarayıcı sekmesinde açılmasını sağlar. Bu nedenle kullanıcılar, tıkladıklarında videoyu YouTube'da açacaklar ancak mevcut sayfadan ayrılmayacaklar.

Video üzerindeki tıklanabilir alanın görüntüsünü korurken, bu kontrol düğmelerine tıklanmasını engellemiş olursunuz. Tarayıcının açılış davranışlarından dolayı bazı farklılıklar olabilir. Bu nedenle, video oynatıcısının otomatik olarak başlamasını sağlamak için autoplay=1 parametresini iframe URL'sine ekledik. Buna ek olarak, allowfullscreen özelliği sayesinde kullanıcılar videoyu tam ekran yapabilirler.

Video_ID kısmını kendi YouTube video kimliğinizle (URL'de "watch?v=" sonrası gelen karakterler) değiştirmeniz gerekmektedir. Örneğin, eğer YouTube video URL'niz "https://www.youtube.com/watch?v=AbCdEfGhIjK" ise, VIDEO_ID yerine AbCdEfGhIjK yazmanız gerekmektedir.

Bu şekilde, ziyaretçilerinizi YouTube'a yönlendirmeden videoyu izlemelerine izin vermiş olursunuz.

 

 

bedaze

kişi bu mesajı beğendi.

#3
bedaze bedaze livetvworld.net Kullanıcı
  • Üyelik 27.08.2013
  • Yaş/Cinsiyet 44 / E
  • Meslek elektrikçi
  • Konum Ankara
  • Ad Soyad Ş** T**
  • Mesajlar 16
  • Beğeniler 4 / 3
  • Ticaret 0, (%0)

OFffLaZZzz adlı üyeden alıntı

Evet, böyle bir ayar yapmanız mümkün. YouTube video oynatıcısının üzerindeki kontrol düğmelerine tıklanmasını engellemek için bazı yöntemler kullanabilirsiniz. İşte bir örnek:

 

<!DOCTYPE html>
<html>
<head>
    <title>Canlı Yayın</title>
</head>
<body>
    <div style="position: relative;">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
        <a href="https://www.youtube.com/watch?v=VIDEO_ID" target="_blank" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;"></a>
    </div>
</body>
</html>

Yukarıdaki HTML kodu, bir <iframe> kullanarak YouTube video oynatıcısını içerir. Ardından <a> etiketiyle video üzerine tam ekran şeklinde kaplayan bir bağlantı eklenir. Bu bağlantı, videoyu açmak için normalde tıklanabilecek alana yerleştirilir, ancak target="_blank" özelliği sayesinde yeni bir tarayıcı sekmesinde açılmasını sağlar. Bu nedenle kullanıcılar, tıkladıklarında videoyu YouTube'da açacaklar ancak mevcut sayfadan ayrılmayacaklar.

Video üzerindeki tıklanabilir alanın görüntüsünü korurken, bu kontrol düğmelerine tıklanmasını engellemiş olursunuz. Tarayıcının açılış davranışlarından dolayı bazı farklılıklar olabilir. Bu nedenle, video oynatıcısının otomatik olarak başlamasını sağlamak için autoplay=1 parametresini iframe URL'sine ekledik. Buna ek olarak, allowfullscreen özelliği sayesinde kullanıcılar videoyu tam ekran yapabilirler.

Video_ID kısmını kendi YouTube video kimliğinizle (URL'de "watch?v=" sonrası gelen karakterler) değiştirmeniz gerekmektedir. Örneğin, eğer YouTube video URL'niz "https://www.youtube.com/watch?v=AbCdEfGhIjK" ise, VIDEO_ID yerine AbCdEfGhIjK yazmanız gerekmektedir.

Bu şekilde, ziyaretçilerinizi YouTube'a yönlendirmeden videoyu izlemelerine izin vermiş olursunuz.

 

 

Hocam öncelikle ilgilenip cevap verdiğiniz için çok teşekkür ederim. Benim istediğim ayrı sayfada açılması değil. Ben Web siteme kanal ID sini girerek o kanaldaki canlı yayın var ise canlı yayını yok ise kanalın son videosınu çektirebiliyorum. Benim istediğim sitemdeki mevcut playerin üzerindeki youtube kontrolleri gözüksün ama tıklanmasın yani video üzerine şeffaf bir perde çekilsin gibi bir şey. Site adresimi özelden atayım incelerseniz daha iyi anlaşılır diye düşünüyorum. Saygılar 

 

 

#4
OFffLaZZzz OFffLaZZzz WM Aracı Kullanıcı
  • Üyelik 16.06.2023
  • Yaş/Cinsiyet 40 / E
  • Meslek Esnaf
  • Konum Trabzon
  • Ad Soyad M** K**
  • Mesajlar 28
  • Beğeniler 10 / 13
  • Ticaret 0, (%0)

bedaze adlı üyeden alıntı

Hocam öncelikle ilgilenip cevap verdiğiniz için çok teşekkür ederim. Benim istediğim ayrı sayfada açılması değil. Ben Web siteme kanal ID sini girerek o kanaldaki canlı yayın var ise canlı yayını yok ise kanalın son videosınu çektirebiliyorum. Benim istediğim sitemdeki mevcut playerin üzerindeki youtube kontrolleri gözüksün ama tıklanmasın yani video üzerine şeffaf bir perde çekilsin gibi bir şey. Site adresimi özelden atayım incelerseniz daha iyi anlaşılır diye düşünüyorum. Saygılar 

python ile ilgili bir kod hazırlıyorum bakacağım

bedaze

kişi bu mesajı beğendi.

wmaraci
wmaraci

#5
OFffLaZZzz OFffLaZZzz WM Aracı Kullanıcı
  • Üyelik 16.06.2023
  • Yaş/Cinsiyet 40 / E
  • Meslek Esnaf
  • Konum Trabzon
  • Ad Soyad M** K**
  • Mesajlar 28
  • Beğeniler 10 / 13
  • Ticaret 0, (%0)

bedaze adlı üyeden alıntı

Hocam öncelikle ilgilenip cevap verdiğiniz için çok teşekkür ederim. Benim istediğim ayrı sayfada açılması değil. Ben Web siteme kanal ID sini girerek o kanaldaki canlı yayın var ise canlı yayını yok ise kanalın son videosınu çektirebiliyorum. Benim istediğim sitemdeki mevcut playerin üzerindeki youtube kontrolleri gözüksün ama tıklanmasın yani video üzerine şeffaf bir perde çekilsin gibi bir şey. Site adresimi özelden atayım incelerseniz daha iyi anlaşılır diye düşünüyorum. Saygılar 

mevcut bir video player'ın üzerini şeffaf bir perde ile örtmek ve YouTube kontrol düğmelerini görsel olarak korumak istiyorsanız, bunu CSS ile yapabilirsiniz. Aşağıdaki örnek kodda, "video-container" adlı bir div'in üzerine şeffaf bir perde ekleyerek içerisindeki YouTube kontrol düğmelerini koruyoruz.

HTML kodu:

<div class="video-container">
  <div id="video-player"></div>
  <div class="overlay"></div>
</div>

CSS kodu:

 

.video-container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Şeffaf perde için RGBA renk kullanılır */
  pointer-events: none; /* Tıklamaları engellemek için pointer-events: none; kullanılır */
}

Bu kodda, "video-container" adlı bir div içinde "video-player" adlı bir div yer alır. Ardından, şeffaf bir perde eklemek için "overlay" adlı bir div daha eklenir. Overlay div'i, position: absolute; ile tüm alanı kaplayacak şekilde ayarlanır ve background-color ile şeffaf perde rengi (örnekte rgba(0, 0, 0, 0.5)) atanır. Son olarak, pointer-events: none; kullanarak overlay üzerindeki tıklamaların engellenmesi sağlanır.

Bu şekilde, mevcut video player'ın üzerinde şeffaf bir perde oluşturarak YouTube kontrol düğmelerini görsel olarak koruyabilirsiniz. Tabii ki, kodu ihtiyaçlarınıza ve sitenizin yapısına göre uyarlamanız gerekebilir.

 

bedaze

kişi bu mesajı beğendi.

#6
bedaze bedaze livetvworld.net Kullanıcı
  • Üyelik 27.08.2013
  • Yaş/Cinsiyet 44 / E
  • Meslek elektrikçi
  • Konum Ankara
  • Ad Soyad Ş** T**
  • Mesajlar 16
  • Beğeniler 4 / 3
  • Ticaret 0, (%0)

Hocam muhtemelen bu son yazdığınız kodlar muhtemelen tam olarak istediğim işi yapacak gibi emeğine sağlık çok teşekkür ederim. Fakat siteye nasıl uygulamam gerektiği ile ilgili hiçbir şey bilmiyorum. Çok fazla oluyorsun demezsen :) eğer vaktin var ise any desk versem cpanel dosyalar dan bakma imkanın olur mu 🤗

 

 

#7
OFffLaZZzz OFffLaZZzz WM Aracı Kullanıcı
  • Üyelik 16.06.2023
  • Yaş/Cinsiyet 40 / E
  • Meslek Esnaf
  • Konum Trabzon
  • Ad Soyad M** K**
  • Mesajlar 28
  • Beğeniler 10 / 13
  • Ticaret 0, (%0)

bedaze adlı üyeden alıntı

Hocam muhtemelen bu son yazdığınız kodlar muhtemelen tam olarak istediğim işi yapacak gibi emeğine sağlık çok teşekkür ederim. Fakat siteye nasıl uygulamam gerektiği ile ilgili hiçbir şey bilmiyorum. Çok fazla oluyorsun demezsen :) eğer vaktin var ise any desk versem cpanel dosyalar dan bakma imkanın olur mu 🤗

biraz uğraştırdı ama %100 çalışan kodu yazıyorum ufak tefek pürüzleri kaldı145187-648de615d9da1.jpg

bedaze

kişi bu mesajı beğendi.

#8
bedaze bedaze livetvworld.net Kullanıcı
  • Üyelik 27.08.2013
  • Yaş/Cinsiyet 44 / E
  • Meslek elektrikçi
  • Konum Ankara
  • Ad Soyad Ş** T**
  • Mesajlar 16
  • Beğeniler 4 / 3
  • Ticaret 0, (%0)

OFffLaZZzz adlı üyeden alıntı

biraz uğraştırdı ama %100 çalışan kodu yazıyorum ufak tefek pürüzleri kaldı145187-648de615d9da1.jpg

Hadi inşallah benim siteyi özelden attım php tabanlı yayin.php diye dosyanın içinde sabit player var yönetim panelinden embed kodu ekliyorum embed kodunun içine hangi kanalın id sini eklersen sitede o kanalın videosunu gösteriyor. Çalışma yaparken bu bilgiler yardımcı olabilir sana diye yazıyorum 

 

 

#9
OFffLaZZzz OFffLaZZzz WM Aracı Kullanıcı
  • Üyelik 16.06.2023
  • Yaş/Cinsiyet 40 / E
  • Meslek Esnaf
  • Konum Trabzon
  • Ad Soyad M** K**
  • Mesajlar 28
  • Beğeniler 10 / 13
  • Ticaret 0, (%0)

bedaze adlı üyeden alıntı

Hadi inşallah benim siteyi özelden attım php tabanlı yayin.php diye dosyanın içinde sabit player var yönetim panelinden embed kodu ekliyorum embed kodunun içine hangi kanalın id sini eklersen sitede o kanalın videosunu gösteriyor. Çalışma yaparken bu bilgiler yardımcı olabilir sana diye yazıyorum 

Fazla bekletmeyeyim bir hatayla birlikte paylaşayım. sağ tıklanıldığında bizim atadığımız sol menü açılıyor ama sol tıklamada engelleniyor. Çözemedim tekrardan bakacağım. kod aşağıdaki gibidir. Kendinize göre düzenlersiniz.
145187-648ded95c507f.jpg

 

Not: sıkıntı çıkaran blok bu "#video-overlay {" overlay auto olunca sol tıklanıyor ama sağda tıklanıyor. 

 

<!DOCTYPE html>
<html>
<head>
  <title>YouTube Video Embed</title>
  <style>
    #video-container {
      position: relative;
      width: 640px; /* Video boyutunu istediğiniz gibi ayarlayın */
      height: 360px;
    }

    #video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
    }

    #video-container:hover #video-overlay {
      pointer-events: auto;
    }

    #custom-context-menu {
      display: none;
      position: absolute;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 5px;
    }

    #custom-context-menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    #custom-context-menu li {
      cursor: pointer;
      padding: 5px;
    }
  </style>
</head>
<body>
  <div id="video-container">
    <div id="video-overlay"></div>
    <iframe
      width="640"
      height="360"
      src="https://www.youtube.com/embed/JUHzvAo9IfM?controls=0" <!-- YouTube video embed URL'sini kullanın -->
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
  </div>

  <div id="custom-context-menu">
    <ul>
      <li id="menu-item-1">Nanik</li>
      <li id="menu-item-2">Tıklayamazsın</li>
      <li id="menu-item-3">Videoya Sağtıklayamazsın</li>
    </ul>
  </div>

  <script>
    var overlay = document.getElementById('video-overlay');
    overlay.addEventListener('contextmenu', function (e) {
      e.preventDefault();
      showCustomContextMenu(e.pageX, e.pageY);
    });

    var menuItem1 = document.getElementById('menu-item-1');
    menuItem1.addEventListener('click', function () {
      // Seçenek 1 için yapılacak işlemler
      hideCustomContextMenu();
    });

    var menuItem2 = document.getElementById('menu-item-2');
    menuItem2.addEventListener('click', function () {
      // Seçenek 2 için yapılacak işlemler
      hideCustomContextMenu();
    });

    var menuItem3 = document.getElementById('menu-item-3');
    menuItem3.addEventListener('click', function () {
      // Seçenek 3 için yapılacak işlemler
      hideCustomContextMenu();
    });

    // Menü dışında bir yere tıklandığında menüyü gizle
    document.addEventListener('click', function (e) {
      if (!overlay.contains(e.target)) {
        hideCustomContextMenu();
      }
    });

    function showCustomContextMenu(x, y) {
      var menu = document.getElementById('custom-context-menu');
      menu.style.left = x + 'px';
      menu.style.top = y + 'px';
      menu.style.display = 'block';
    }

    function hideCustomContextMenu() {
      var menu = document.getElementById('custom-context-menu');
      menu.style.display = 'none';
    }
  </script>
</body>
</html>

Mesaj 1 defa düzenlendi. Son düzenleyen: OFffLaZZzz (17.06.2023 20:30)

bedaze

kişi bu mesajı beğendi.

#10
bedaze bedaze livetvworld.net Kullanıcı
  • Üyelik 27.08.2013
  • Yaş/Cinsiyet 44 / E
  • Meslek elektrikçi
  • Konum Ankara
  • Ad Soyad Ş** T**
  • Mesajlar 16
  • Beğeniler 4 / 3
  • Ticaret 0, (%0)

Usta emeğine sağlık ama ben bu kodu kendi siteme uyarlayamadım. Uyarlama konusunda da yardımcı olursan memnun olurum. 

 

 

Landing page yazılımı
Php ile iki adres arası mesafe ölçümü
wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
 
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al