0
Kayıt Ol

Resim üzerine gelince video oynasın YARDIM

5

●

1.511

  • 20-11-2016, 15:29:18
    #1
    satrancali
    satrancali
    merhaba arkadaşlar, bir resim var mouse ile üzerine geldiğim zaman resmin olduğu alan içinde benim önceden belirlediğim video oynasın istiyorum. içerik gireceğim içeriğe uygun resim ve içeriğe uygun video gireceğim şeklinde düşünün. mouse gelincede resim yerine video görünüp video oynamaya başlasın istiyorum baya bi süredir araştırıyorum beceremedim bi türlü yardımcı olabilecek varmı? skype: satrancali
  • 20-11-2016, 17:05:07
    #2
    Webbilgim
    Webbilgim
    Test: http://jsfiddle.net/7jjkf2yx/

    <div class="replacement">
    <img class="top-img" src="http://placekitten.com/560/315" alt="Kitten">
    <iframe class="video" width="560" height="315" src="http://www.youtube.com/embed/H93n-k3SkiQ?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
    .replacement {
    position: relative;
}
.top-img {
    position: absolute;
}
    jQuery(document).ready(function($) {
    $('.replacement .top-img').on('mouseenter', function () {
        $(this).fadeOut(500);
    });
});
  • 20-11-2016, 17:26:36
    #3
    satrancali
    satrancali
    Webbilgim adlı üyeden alıntı: mesajı görüntüle
    Test: http://jsfiddle.net/7jjkf2yx/

    <div class="replacement">
    <img class="top-img" src="http://placekitten.com/560/315" alt="Kitten">
    <iframe class="video" width="560" height="315" src="http://www.youtube.com/embed/H93n-k3SkiQ?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
    .replacement {
    position: relative;
}
.top-img {
    position: absolute;
}
    jQuery(document).ready(function($) {
    $('.replacement .top-img').on('mouseenter', function () {
        $(this).fadeOut(500);
    });
});
    bu aradığım kod değil, sayfa yüklenince kendi kendine başlıyor ve mouse ile resmin üzerine gelince resim üzerinde oynaması evet güzel fakat mouse çekince tekrardan resim görünmüyor video oynamaya devam ediyor. :S
  • 20-11-2016, 18:53:56
    #4
    Webbilgim
    Webbilgim
    http://jsfiddle.net/bdjzp1ye/

    <body>
    
    <div>     <img class="top-img" src="http://placekitten.com/560/315" alt="">
    </div>

 <p class="hidden"><iframe class="video" width="560" height="315" src="http://www.youtube.com/embed/H93n-k3SkiQ?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe></p>
</body>
    div {
  height:0px;
}

p.hidden {
 display:none; 
}

p {
    height:100px;   
}
    $("body").on("mouseenter", "div", function(){
     $("p").removeClass("hidden");
}).on("mouseleave", "div", function(){
    $("p").addClass("hidden");
});
  • 31-07-2017, 17:27:36
    #5
    GunduzYuruyen
    GunduzYuruyen
    Webbilgim adlı üyeden alıntı: mesajı görüntüle
    http://jsfiddle.net/bdjzp1ye/

    <body>
    
    <div>     <img class="top-img" src="http://placekitten.com/560/315" alt="">
    </div>

 <p class="hidden"><iframe class="video" width="560" height="315" src="http://www.youtube.com/embed/H93n-k3SkiQ?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe></p>
</body>
    div {
  height:0px;
}

p.hidden {
 display:none; 
}

p {
    height:100px;   
}
    $("body").on("mouseenter", "div", function(){
     $("p").removeClass("hidden");
}).on("mouseleave", "div", function(){
    $("p").addClass("hidden");
});

    örnek sitede çalışıyor fakat linkleri htmlye kopyalayınca çalışmıyor sorun nedir acaba bilen varmı ?