यूट्यूब वीडियो चलाने के लिए एक jquery विंडो पॉप अप कैसे करें?

Question

मुझे इस वीडियो को स्वचालित रूप से चलाने के लिए चाहिए। यह अच्छा होगा, यह कोड याहू इत्यादि जैसे अन्य स्रोतों से वीडियो चला सकता है .. क्या jquery के बजाय HTML5 का उपयोग करना भी संभव है? FancyBox के लिए क़ौम पर

Answer 1

समारोह या प्लगइन आप पॉपअप विंडो प्रदर्शित करने के लिए संभव है कि आप वीडियो प्रदर्शित करने के प्रयोग कर रहे हैं से अलग होगा का उपयोग करें। इस उदाहरण में मैंने Overlay Plugin from jQuery Tools का उपयोग मोडल प्रदर्शित करने के लिए किया था, फिर यूट्यूब फ्लैश प्लेयर प्रदर्शित करने के लिए swfobject का उपयोग किया था। वैकल्पिक रूप से, आप वीडियो प्रदर्शित करने के लिए HTML5 video player with Flash fallback का उपयोग कर सकते हैं, लेकिन आपको अभी भी अपने मोडल को पॉप अप करने की आवश्यकता होगी।

<a href="http://www.youtube.com/v/2cxqZiWyW3g&hl=en_US&fs=1&autoplay=1" 
    class="video-link">Video 1</a> 
<a href="http://www.youtube.com/v/607RMNoJfl4&hl=en_US&fs=1&autoplay=1" 
    class="video-link">Video 2</a> 

<div class="modal" id="video-modal"> 
    <div id="video-container" style="width: 425px; height: 344px;"></div> 
</div> 

<script language="javascript" type="text/javascript"> 

    $(function() { 
     var videoModal = $('#video-modal').overlay({ 
      expose: { 
       color: 'black', 
       loadSpeed: 200, 
       opacity: 0.85 
      }, 
      closeOnClick: true, 
      api: true 
     }); 

     $('.video-link').click(function() { 
      videoModal.load(); 

      var videoUrl = $(this).attr('href'); 
      var flashvars = {}; 
      var params = { 
       allowFullScreen: "true", 
       allowscriptaccess: "always" 
      }; 
      var attributes = {}; 

      swfobject.embedSWF(videoUrl, 'video-container', '425', '344', '9.0.0', '', flashvars, params, attributes); 

      return false; 
     }); 
    }); 

</script> 

Answer 2

देखो और ColorBox

Answer 3

PrettyPhoto एक शुद्ध JavaScript लाइब्रेरी जो लाइटबॉक्स में चित्र और वीडियो प्रदर्शित करता है।

अपने उद्देश्यों के लिए, आप आप एक विशेष "rel" विशेषता के साथ यूट्यूब लिंक को टैग की जरूरत है, वीडियो होगा तो एक पॉपअप lightbox में खुले।

Answer 4

SimpleModal एक महान jQuery प्लगइन है के रूप में यह कई अलग अलग विकल्प प्रदान करता है, एक जा रहा है बाहरी सामग्री प्रदर्शित:

// Display an external page using an iframe 
var src = "http://365.ericmmartin.com/"; 
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', { 
    closeHTML:"", 
    containerCss:{ 
     backgroundColor:"#fff", 
     borderColor:"#fff", 
     height:450, 
     padding:0, 
     width:830 
    }, 
    overlayClose:true 
}); 

Bill Beckelman कस्टम पुष्टिकरण संवाद बॉक्स के रूप में Asp.Net साथ SimpleModal को एकीकृत पर ट्यूटोरियल के महान श्रृंखला है। वह दिखाता है कि कैसे महान क्लाइंट साइड कार्यक्षमता के साथ-साथ सर्वर पर वापस पोस्ट करने के तरीके को कैसे बनाया जाए। यह वास्तव में एएसपी.Net के साथ jQuery को एकीकृत करने के तरीके के बारे में मेरे सिर को लपेटने में मदद करता है।