Bagaimana cara menyematkan video YouTube autoplaying di iframe?

Saya mencoba menyematkan versi iframe baru dari video YouTube dan membuatnya diputar otomatis.

Sejauh yang saya tahu, tidak ada cara untuk melakukan ini dengan mengubah bendera ke URL. Apakah ada cara untuk melakukannya dengan menggunakan JavaScript & API?

Ini berfungsi di Chrome tetapi tidak pada Firefox 3.6 (peringatan: video RickRoll):

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

The API JavaScript untuk iframe embeds ada, tapi masih dipasang sebagai fitur eksperimental.

UPDATE: API iframe sekarang didukung penuh dan "Membuat objek YT.Pemain - Contoh 2" menunjukkan cara mengatur "putar otomatis" dalam JavaScript.

Kode tertanam youtube secara otomatis dinonaktifkan. Cukup tambahkan autoplay=1di akhir atribut "src". Sebagai contoh:

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

Sejak April 2018, Google membuat beberapa perubahan pada Kebijakan Autoplay . Jadi, Anda harus melakukan sesuatu seperti ini:

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

Agustus 2018 Saya tidak menemukan contoh kerja tentang implementasi iframe. Pertanyaan lain hanya terkait dengan Chrome, yang memberikannya sedikit.

Anda harus menonaktifkan suara mute=1untuk memutar otomatis di Chrome. FF dan IE tampaknya berfungsi dengan baik menggunakan autoplay=1parameter.

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

2014 iframe embed tentang cara menyematkan video youtube dengan putar otomatis dan tidak ada video yang disarankan di akhir klip

rel=0&autoplay 

Contoh Di Bawah Ini:.

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

di akhir iframe src, tambahkan &enablejsapi=1agar API js dapat digunakan pada video

dan kemudian dengan jquery:

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

ini akan memutar video secara otomatis di dokumen. Sudah

perhatikan, Anda juga bisa menggunakan ini di dalam fungsi klik untuk mengklik elemen lain untuk memulai video

Lebih penting lagi, Anda tidak dapat memulai video secara otomatis di perangkat seluler sehingga pengguna harus selalu mengeklik pemutar video itu sendiri untuk memulai video

Sunting: Saya sebenarnya tidak 100% yakin pada dokumen. Sudah iframe akan siap, karena YouTube masih bisa memuat video. Saya sebenarnya menggunakan fungsi ini di dalam fungsi klik:

$('.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
});

The bendera , atau parameter yang dapat Anda gunakan dengan IFRAME dan OBYEK embeds didokumentasikan di sini; detail tentang parameter mana yang berfungsi dengan pemain apa juga disebutkan dengan jelas:

Parameter Pemain dan Pemain Tertanam YouTube

Anda akan melihat bahwa autoplayini didukung oleh semua pemain (AS3, AS2 dan HTML5).

Tip beberapa pertanyaan untuk mereka yang tidak tahu (melewati saya dan mendatangi saya)

Jika Anda membuat satu permintaan dengan url hanya ?autoplay=1berfungsi seperti yang ditunjukkan oleh jawaban mjhm

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

Jika Anda membuat beberapa kueri, ingat yang pertama dimulai dengan ?sementara sisanya dimulai dengan a&

Katakanlah Anda ingin mematikan video terkait tetapi mengaktifkan putar otomatis ...

Ini bekerja

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

dan ini berhasil

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

Tapi ini tidak akan berhasil ..

<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>

contoh perbandingan

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

Info lebih lanjut

Baca balasan NextLocal di bawah ini untuk informasi lebih lanjut tentang menggunakan beberapa string kueri

Untuk mendapatkan jawaban yang diterima oleh mjhm yang bekerja di Chrome 66 pada Mei 2018, saya menambahkan allow=autoplayke iframe dan enable_js=1ke string kueri:

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

Saat ini saya menyertakan atribut baru "bolehkan" pada tag iframe, misalnya:

bolehkan = "accelerometer; putar otomatis; media terenkripsi; giroskop; gambar-dalam-gambar"

Kode terakhir adalah:

<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 - tambahkan &enablejsapi=1keIFRAME SRC

2 - fungsi jQuery:

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

Bekerja dengan baik

Untuk menggunakan api javascript,

<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>

Untuk memutar youtube dengan id:

swfobject.embedSWF

referensi: https://developers.google.com/youtube/js_api_reference magazine

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/9IILMHo4RCQ?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" 
        frameborder="0" allowfullscreen></iframe>

Desember 2018,

Mencari video youtube AUTOPLAY, LOOP, MUTE untuk ditanggapi.

Jawaban lain tidak berhasil.

Saya menemukan solusi dengan perpustakaan: react-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}
            />
        )
    }

}