JQuery ile Popup Açılan Video

 bcakir
 15 Ekim 2011

Merhaba arkadaşlar yeni bir uygulamada tekrar buluştuk. Güzel bir sevinç içerisindeyim çünkü bu yazıyla 100. içeriğime ulaşmış olacağım. Umarım şimdiye kadar sizlere yardımcı olacak bilgiler paylaşmışımdır. Bu yazımda JQuery ile popup pencere açarak bu pencere içerisinde youtube videosunun nasıl gösterildiğini anlatacağım. Bu uygulamayla web sitenizin tanıtım videosu tarzında görüntülerini kolayca ziyaretçilerinize izletebileceksiniz. Uygulamamızda fancybox adında JQuery ile yazılmış bir kütüphane kullanacağız. Bundan dolayı uygulamamız çok az koda inmiş olacak. Daha önce bu tür hazır kütüphane içeren takvim uygulaması da yapmıştık. Sizlerde internette arayarak bu tarz kütüphaneleri kolayca bulabilirsiniz. Ben de bu türlü hazır uygulamaları içeren yazıları sizlerle paylaşmaya devam edeceğim. Uygulamamızın çalışabilmesi için bazı dosyalara ihtiyacınız var bundan dolayı da yazımızın sonunda uygulamamızın bütün betik ve resimlerini içerek çalışır halini sizlere vereceğim. Şimdi uygulamamızı yapmaya başlayabiliriz.

<!DOCTYPE html>
<html>
<head>
<title>FancyBox Video</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {

    $("#video").click(function() {
        $.fancybox({
            'title' : 'Noyan Video',
            'width' : 640,
            'height': 390,
            'href'  : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'  : 'swf',
            'swf'   : {
            'wmode' : 'transparent',
            }
        });
    	return false;
    });

});
</script>
</head>
<body>
<a id="video" title="Noyan Video" href="http://www.youtube.com/watch?v=UMwuY_-I1jQ">Video izle</a>
</body>
</html>

Uygulamamızı JQuery ve hazır yazılmış fancybox eklentisi ile kolayca yapıp youtube videomuzu izlemek isteyen kişiye popup açılan pencere içerisinde gösterdik. Siz isterseniz videonun görüntülenme boyutu gibi ayarları değiştirerek, uygulamayı kendi videolarınıza göre ayarlayabilirsiniz. Bütün dökümanı içeren zipli, çalışan dosyayı buradan indirebilirsiniz. Böylece bir yazımızın daha sonuna geldik. Yararlı olması dileğiyle.

Yukarıdaki video uygulamasının, birden fazla video için olanını buradan ve sayfa ilk açıldığında çalışanını ise buradan indirebilirsiniz.

 8.451 Okunma

Bu yazıya 35 yorum yapılmış.

  1. teşekkür ederim tam aradığım uygulama

  2. kalavyene sağlık teşekkürler

  3. Hocam, verdiğiniz değerli bilgiler için teşekkür ederim. Acaba facebooktaki gibi resim slider yapma şansımız var mı??

    • teşekkür ederim bende. tabi ki öyle bir slider yapabiliriz. yazdığım haber siteleri gibi resim gösteren örnek uygulamaya buradan ulaşabilirsin.
      Yeni yazdığım Facebook resim gösterimi tarzı uygulamaya buradan ulaşabilirsin.

  4. Hocam, bir sayfada birden fazla bu tür link kullanımı sorun oluyor sanki. Bağlantı için küçük bir YouTube gif resmi kullandım. İlk bağlantı gayet güzel çalışıyor ancak ikincisi youtube.com da açılıyor.

    • Uygulama sadece 1 tane video içindir. Birçok video için kullanacaksan fonksiyonu çoğaltmak en basit çözüm olabilir. Ama id kısımlarını düzeltmeyi ihmal etme. Bir id değerinden 2 tane veya daha fazla olamaz.
      Yani a id=”video” değeri ne ise $(“#video”) kısmında da o olmalı. Ama 2 tane aynı değer kullanma, çakışır ve çalışmaz.

  5. ( Yani a id=”video” değeri ne ise $(“#video”) kısmında da o olmalı. Ama 2 tane aynı değer kullanma, çakışır ve çalışmaz.)

    bu konuda ben çok çaba sarfettim ama sonuç yukarıda yazan arkadaş gibi değişen hiç bişi olmadı..Bu çoğaltma konusunda “kod” olarak yardımcı olabilirseniz,,bu sayfalarda benim gibi sorunu olan arkadaşlara da bir örnek “KOD” teşkil etmiş olabilir..
    Şimdiden teşekkür ediyorum..

    • Yorumunuz için teşekkür ederim. Yukarıdaki uygulamanın çoklu video versiyonunu buradan indirebilirsiniz, ayrıca yazıya da eklenmiştir. İyi günler.

      • Hazırlamaya çalıştığım bir okul sınıfı sitesi için makbul bir durum olucak cevabınız..”Buradan”kısmından ulaşmadım henüs bu sayfadayım ama şimdiden çok teşekkür ederim…

  6. Bu arada unutmadan,,diğer mesajlarımda yazmayı unuttum,,çok teşekkür ederim gerçekten.paylaşımcı ruh ve düşünceleriniz için..Bana çok faydalı sitelerden biri oldu blogunuz..Ufkumu genişlettiniz valla..Bende de bu herşeyi öğrenme azmi oldugu müddetçe sitenizin müdavimleri arasında yerimi alacağıma inanıyorum..
    Tekrar çok tşkürler..

  7. Sayenizde halloldu wallahi. Elinize kolunuza sağlık.. Buradan bakabilirsin bcakir kardeşim.(isminizi bilemedim öle yazdım) “Hakkımda” bölümünde ankarada olduğunu anladım bende ankaradayım..

    • Ellerine sağlık Melih Hocam, güzel bir uygulama olmuş….

    • Yalnız sayfa başlığı (Title) : FancyBox Video olarak kalmış. Onu değiştir istersen…

    • Uygulamana insanları sokmak için temel izinleri verdirmek gerekiyor. Bunu yapmaya mecbursun ama istersen ekstra izinleri boş bırakırsın. Ama bu da yapacağın uygulamada sana sınır koyar. Yani duvarında otomatik bilgi paylaşmak istiyorsan publish_stream almak zorundasın. Scope kısmının karşısını boş bırakırsan da sadece temel bilgileri için izin alırsın, diğer izin istekleri gider.

      • Burası sitem değil,,sadece birilerine faydam dokunsun diye “amme” hizmeti veriyorum.Beklentisiz ve çıkarsız.Fakat belkide haklısınız benim ilk uğraşım olduğu için sitem diyebiliriz..Bu site html olarak üstünde çalıştığım (:d:d:d:d) ilk sitem.İsteyince başarılabiliyormuş demekki..Emekli olduğumdan evde ancak böle birilerine faydalı olmaya çalışmakla vakit geçiyor..ne yapiim.(asıl uğraşım flash)
        Bir örnek flash-Video Buradan izlenilebilir..
        Tanıştığıma ayrıca memnun oldum bünyamin..Ne güzel ayrıca ideallerim arasında yer alan (odtü) gibi bir yerdesin..O yıllarda gidip görüp giremediğim bir yer..

        thelonerider kardeşim uyarın için sağol..hallettim..

  8. Selam
    Benden sonrakilere bir faydam olsun istedim.Döndüm geldim aynı konuya..Çoklu video konusunda ben bir program buldum.Free olarak sunulan bu programda kodlarla uğraşmaya gerek kalmıyor.exe olarak gelen free program bilgisayarda kurulumun ardından html,image,css,js dosyalarını kendi oluşturup,,çeşitli resim seçenekleriyle kullanıya sunuyor ayrıca hoş bir programa benziyor..
    Programa buradan ulaşılabilir..

  9. merhaba
    bu videoyu siteye ilk giişte oynatacak şekilde nasıl ayalarız . saygılar

    • Yukarıdaki uygulamanın açılışta çalışan versiyonunu buradan indirebilirsiniz, ayrıca yazıya da eklenmiştir. İyi günler.

      • Bende açılışta açılanını arıyordum saolasın 😀

  10. çok teşekkürler.

  11. Hocam merhaba bunu kişi kapattıktan sonra birdeha karşısına geitrmemeyi nasıl başarabiliriz.

    • Çerezlerde kapattığı bilgisini saklaman lazım.

  12. Bu fancbox’ı asp.net projesinde bir image yada normal butonun OnClick versiyonuna nasıl ekleyebiliriz codebehind tarafında istediğimiz bir şarta bağlı olarak fancybox çalıştırmasını istiyorsak nasıl yapabiliriz ?

    • Ajax kontrollerini Asp.net projeleriyle hiç değişiklik yapmadan kullanabilirsin. Tek yapman gereken Asp.net form kontrolleri bilmek ve kullanmak.

  13. Merhaba, hocam çok teşekkürler ancak ben bunu nivo. slider jquery ile kullanınca aynı sayfada çalıştıramadım scripti kapatmadan önceki satıra jQuery.noConflict(); uyguladım ama popup çalışmıyor, yardımcı olursanız sevinirim.Kodlarıda aşağıda paylaşıyorum.

    $(window).load(function() {
    $(‘#slider’).nivoSlider();
    });

    $(document).ready(function() {

    $(“#video”).click(function() {
    $.fancybox({
    ‘title’ : ‘Dr. Rimpler’,
    ‘width’ : 550,
    ‘height’ : 400,
    ‘href’ : this.href.replace(new RegExp(“watch\\?v=”, “i”), ‘v/’),
    ‘type’ : ‘swf’,
    ‘swf’ : {
    ‘wmode’ : ‘transparent’,
    }
    });
    return false;
    });

    });

    jQuery.noConflict();

  14. merhabalar videolar local de çalışıyor ama sunucuya attıgımızda direk youtube a gidiyor linki0 nasıl düzelte biliriz? şimdiden teşekkürker

  15. Merhaba hocam , çok sagolun . deli gibi açılışta nasıl bir pencere ekranı getiririm diye arıyordum . sizin blogunuz sayesinde bu sorundan kurtuldum . şimdi yapmam gereken video degilde img olarak açılışta gözükmesini sağlamak 🙂

    tekrar tekrar çok çok teşekkür ederimm hocam ….

  16. Merhaba,
    Paylaşımınız için teşekkür ederim. Benim bir sorum olacak. 46 sn süren bir videoyu youtube’a yükledim. açılışta otomatik olarak bu javascriptle ekrana getiriyorum. Yapmak istediğim şey şu. Video tamamlandığında bu açtığımız pencerenin kendiliğinden kapanmasını istiyorum. Bunu yapmak mümkün mü acaba?

  17. Merhaba,

    Açılışta calışması gereken tıklanmadan çalışmıyor neden olabilir ?

    Vermiş olduğunuz bilgilerden dolayı teşekkür ederim.

    • Bende çalışıyor açılışta, acaba tarayıcı sürümünden falan mı fark ediyor? Benim tarayıcıların hepsi son sürüm sayılır ve html 5 destekli.

  18. Güzel uygulama, çok video için olanı lazımdı bana teşekkür ederim.

  19. Hocam bunu youtube değilde vk da oynatılacak şekilde nasıl ayarlayabiliriz?

  20. Hocam ben hostingime atmış olduğum videoyu eklemek istiyorum onu nasıl yapabilirim? Sitemdeki video linkini youtubedeki gibi index.php sayfasına ekledim ama çalışmadı.

  21. Arkadaşlar ben youtube videoyu açılışta oynatıyorum. Ama kapattığımda video arka planda oynamaya devam ediyor. Bunun çözümü nedir? Pencereyi kapattığımda videonunda kapanmasını istiyorum.
    Teşekkür ederim.

  22. s.a hocam, mrb arkadaslar ben bunu filezilledan attım sitenin içine fakat sol köşede video izle yazısı çıkıyor tıkladıkdan sonra video kutusu öne geliyor lütfen yardım eder misiniz?

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery
Kapat