Iframe में YouTube वीडियो को ऑटोप्लेइंग कैसे एम्बेड करें?


225

मैं एक YouTube वीडियो के नए iframe संस्करण को एम्बेड करने और इसे ऑटो प्ले पर लाने का प्रयास कर रहा हूं।

जहां तक ​​मैं बता सकता हूं, झंडे को यूआरएल में संशोधन करके ऐसा करने का कोई तरीका नहीं है। क्या जावास्क्रिप्ट और एपीआई का उपयोग करके इसे करने का कोई तरीका है?


क्या वीडियो को चलाने के दौरान ध्वनि को म्यूट करने का कोई तरीका है, कोड के माध्यम से, मैं अपने उपयोगकर्ताओं को ध्वनि के साथ आश्चर्यचकित नहीं करना चाहता हूं
डेनियल मेट्लिट्स्की

जवाबों:


423

यह क्रोम में काम करता है लेकिन फ़ायरफ़ॉक्स 3.6 (चेतावनी: रिकॉल वीडियो):

<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>

जावास्क्रिप्ट एपीआई आइफ्रेम एम्बेड करता है के लिए मौजूद है, लेकिन अभी भी एक प्रायोगिक सुविधा के रूप में तैनात किया गया है।

अद्यतन: आइफ्रेम एपीआई अब पूरी तरह से समर्थित है और "YT.Player ऑब्जेक्ट बनाना - उदाहरण 2" दिखाता है कि जावास्क्रिप्ट में "ऑटोप्ले" कैसे सेट किया जाए।


2
संकेत: मोबाइल उपकरणों पर यह संभव है src पैरामीटर और एपीआई कॉल दोनों प्रतिबंधों के कारण काम नहीं करेंगे: Developers.google.com/youtube/…
Linus Caldwell

मुझे लगता है कि मोबाइल पर (एंड्रॉइड 5.0 पर वेबव्यू) फ़ंक्शन onYouTubeIframeAPIReady()चालू नहीं हुआ है। किसी के पास कोई हल है?
कोई कहीं

2
क्या वीडियो को चलाने के दौरान ध्वनि को म्यूट करने का कोई तरीका है, कोड के माध्यम से, मैं अपने उपयोगकर्ताओं को ध्वनि के साथ आश्चर्यचकित नहीं करना चाहता हूं
डेनियल मेट्लिट्स्की


6
आपको इसकी आवश्यकता भी हो सकती है: अपने iFrame के लिए = "ऑटोप्ले" की अनुमति दें
जेफ़ज़

40

Youtube का एम्बेडेड कोड डिफ़ॉल्ट रूप से ऑटोप्ले है। बस autoplay=1"src" विशेषता के अंत में जोड़ें । उदाहरण के लिए:

<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>

2
?autoplay=1src में जोड़ें
स्क्विर्ल

1
हाँ वास्तव में ऑटोप्ले = 1 जबकि? संकेत करें कि src में रंग, नियंत्रण और प्रत्येक द्वारा अलग किए गए और साइन जैसे पैरामीटर हो सकते हैं। में विस्तृत वर्णन यहां देखा जा सकता developers.google.com/youtube/player_parameters#Parameters
वहीद उर रहमान


14

अगस्त 2018 मुझे iframe कार्यान्वयन पर एक कार्यशील उदाहरण नहीं मिला। अन्य प्रश्न केवल क्रोम से संबंधित थे, जिसने इसे थोड़ा दूर कर दिया।

mute=1Chrome पर ऑटोप्ले करने के लिए आपको ध्वनि को म्यूट करना होगा । एफएफ और आईई autoplay=1पैरामीटर के रूप में उपयोग करके ठीक काम करने लगते हैं ।

<iframe src="//www.youtube.com/embed/{{YOUTUBE-ID}}?autoplay=1&mute=1" name="youtube embed" allow="autoplay; encrypted-media" allowfullscreen></iframe>

12

2014 iframe कैसे ऑटोप्ले के साथ एक यूट्यूब वीडियो एम्बेड करने के लिए और क्लिप के अंत में कोई सुझाव दिया वीडियो पर एम्बेड

rel=0&amp;autoplay 

नीचे का उदाहरण:

<iframe width="640" height="360" src="//www.youtube.com/embed/JWgp7Ny3bOo?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>

9

iframe src के अंत में, &enablejsapi=1वीडियो पर js API का उपयोग करने की अनुमति दें

और फिर jquery के साथ:

jQuery(document).ready(function( $ ) {
  $('.video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
});

यह डॉक्यूमेंट पर वीडियो को स्वचालित रूप से प्ले करना चाहिए

ध्यान दें, कि आप वीडियो को प्रारंभ करने के लिए किसी अन्य तत्व पर क्लिक करने के लिए एक क्लिक फ़ंक्शन के अंदर भी इसका उपयोग कर सकते हैं

इससे भी महत्वपूर्ण बात, आप मोबाइल डिवाइस पर वीडियो को ऑटो-स्टार्ट नहीं कर सकते, इसलिए उपयोगकर्ताओं को वीडियो शुरू करने के लिए हमेशा वीडियो प्लेयर पर क्लिक करना होगा

संपादित करें: मैं वास्तव में दस्तावेज़ पर 100% निश्चित नहीं हूं। पहले से ही आइफ्रेम तैयार हो जाएगा, क्योंकि YouTube अभी भी वीडियो लोड कर रहा है। मैं वास्तव में एक क्लिक फ़ंक्शन के अंदर इस फ़ंक्शन का उपयोग कर रहा हूं:

$('.video-container').on('click', function(){
  $('video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
  // add other code here to swap a custom image, etc
});

1
इस उत्तर का उपयोग, और setTimeoutमेरे लिए एक काम में jQuery के चयनकर्ता को लपेटकर ।
tyler.frankenstein

1
यहाँ भी, बस हर सेकंड में कई बार आग लग जाती है और यह काम करेगा।
मथायस क्लेन

6

झंडे या पैरामीटर है कि आप IFRAME और वस्तु एम्बेड यहाँ प्रलेखित रहे हैं के साथ उपयोग कर सकते हैं; किस खिलाड़ी के साथ कौन सा पैरामीटर काम करता है, इसका विवरण भी स्पष्ट रूप से उल्लिखित है:

YouTube एंबेडेड प्लेयर और प्लेयर पैरामीटर्स

आप देखेंगे कि autoplayसभी खिलाड़ियों (AS3, AS2 और HTML5) द्वारा समर्थित है।


6

उन लोगों के लिए कई प्रश्न टिप करते हैं जो नहीं जानते (मेरे और मेरे भविष्य के लिए)

यदि आप url के साथ एक ही क्वेरी कर रहे हैं तो mjhm के उत्तर द्वारा दिखाए गए अनुसार?autoplay=1 काम करता है

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1"></iframe>

यदि आप कई सवाल कर रहे हैं, तो याद रखें कि पहले ?थोड़ी देर के साथ शुरू होती है, जबकि बाकी की शुरुआत होती है&

कहते हैं कि आप संबंधित वीडियो को बंद करना चाहते हैं, लेकिन ऑटोप्ले सक्षम करें ...

यह काम

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0&autoplay=1"></iframe>

और यह काम करता है

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&rel=0"></iframe>

लेकिन ये काम नहीं करेंगे ..

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0?autoplay=1"></iframe>

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1&rel=0"></iframe>

उदाहरण तुलना

https://jsfiddle.net/Hastig/p4dpo5y4/

और जानकारी

कई क्वेरी स्ट्रिंग्स का उपयोग करने के बारे में अधिक जानकारी के लिए NextLocal का उत्तर नीचे पढ़ें


1
आपके काम न करने का कारण यह है कि आप पहले से ही ?rel=0वहाँ थे। यदि आपने हटा दिया कि यह काम करेगा। क्वेरी स्ट्रिंग सिंटैक्स के बारे में और अधिक पढ़ें यहाँ अगर आप चाहें तो। या ?rel=0?autoplay=1तो होना चाहिए ?autoplay=1या?rel=0&autoplay=1
jaggedsoft

@NextLocal धन्यवाद, मैं इस पर वापस आऊंगा और अगली बार जब मैं यूट्यूब वीडियो पर कुछ काम कर रहा हूं, तो अपना उत्तर संपादित / हटा दूंगा।
हास्टिग ज़ुसमेनस्टेलन

उदाहरण प्रदान कर रहे हैं http://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1निश्चित रूप से काम नहीं करेगा, लेकिन https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1ऐसा करना चाहिए
jaggedsoft

@NextLocal हा, मुझे अब मिल गया है। मुझे यकीन नहीं है कि मुझे यह कैसे पता चला कि: D धन्यवाद फिर से।
हास्टिग ज़ुसमेनस्टेलन

क्या वीडियो चलाने के दौरान ध्वनि को म्यूट करने का एक तरीका है, कोड के माध्यम से, मैं ध्वनि के साथ अपने उपयोगकर्ताओं को आश्चर्यचकित नहीं करना चाहता हूं
डेनियल मेटलिट्स्की

3

मई 2018 में क्रोम 66 पर mjhm द्वारा काम करने के लिए स्वीकृत उत्तर के लिए, मैंने allow=autoplayiframe और enable_js=1क्वेरी स्ट्रिंग में जोड़ा :

<iframe allow=autoplay width="420px" height="345px" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&enable_js=1"></iframe>

2

आजकल मैं उदाहरण के लिए, आइफ्रेम टैग पर एक नई विशेषता "अनुमति" शामिल करता हूं:

अनुमति दें = "एक्सीलरोमीटर; ऑटोप्ले; एनक्रिप्टेड-मीडिया; जाइरोस्कोप; पिक्चर-इन-पिक्चर"

अंतिम कोड है:

<iframe src="https://www.youtube.com/embed/[VIDEO-CODE]?autoplay=1" 
frameborder="0" style="width: 100%; height: 100%;"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>

एक चाल काम करता है! मैं यह पता नहीं लगा सका कि पृष्ठ लोड केवल कभी-कभी वीडियो क्यों दिखा रहे थे और अन्य बार नहीं!
शन्नोआबिके

1

1 - ऐड &enablejsapi=1करने के लिएIFRAME SRC

2 - jQuery दुर्ग:

  $('iframe#your_video')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');

ठीक काम करता है


मेरे मामले में यह कंसोल से काम करता है, या जब मैंने पहले ही वीडियो के साथ मैन्युअल रूप से बातचीत की है। लोड पर काम नहीं करता है, यहां तक ​​कि टाइम-आउट
mate.gwozdz

0

जावास्क्रिप्ट एपीआई का उपयोग करने के लिए,

<script type="text/javascript" src="swfobject.js"></script>
  <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>

  <script type="text/javascript">

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/OyHoZhLdgYw?enablejsapi=1&playerapiid=ytplayer&version=3",
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);

  </script>

आईडी के साथ यूट्यूब खेलने के लिए:

swfobject.embedSWF

संदर्भ: https://developers.google.com/youtube/js_api_reference पत्रिका



0

दिसंबर 2018,

प्रतिक्रिया के लिए एक AUTOPLAY, LOOP, MUTE youtube वीडियो की तलाश में।

अन्य उत्तरों ने काम नहीं किया।

मुझे एक पुस्तकालय के साथ एक समाधान मिला: प्रतिक्रिया-यूट्यूब

class Video extends Component {

    _onReady(event) {
        // add mute
        event.target.mute();
        // add autoplay
        event.target.playVideo();
    }

    render() {
        const opts = {
            width: '100%',
            height: '700px',
            playerVars: {
                // remove video controls 
                controls: 0,
                // remove related video
                rel: 0
            }
        };

        return (
            <YouTube
                videoId="oHg5SJYRHA0"
                opts={opts}
                // add autoplay
                onReady={this._onReady}
                // add loop
                onEnd={this._onReady}
            />
        )
    }

}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.