Bagaimana cara menyematkan video YouTube autoplaying di iframe?


225

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?


Apakah ada cara untuk menonaktifkan suara ketika video mulai diputar, melalui kode, saya tidak ingin mengejutkan pengguna saya dengan suara
daniel metlitski

Jawaban:


423

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.


2
Petunjuk: Pada perangkat seluler dimungkinkan parameter src dan panggilan api tidak akan berfungsi karena batasan: developers.google.com/youtube/…
Linus Caldwell

Saya menemukan bahwa di seluler (Webview di Android 5.0) fungsi onYouTubeIframeAPIReady()tidak terpicu. Adakah yang punya solusi?
Seseorang di suatu tempat

2
Apakah ada cara untuk menonaktifkan suara ketika video mulai diputar, melalui kode, saya tidak ingin mengejutkan pengguna saya dengan suara
daniel metlitski


6
Anda mungkin juga perlu: allow = "autoplay" untuk iFrame Anda
Jeffz

40

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>

2
tambahkan ?autoplay=1ke src
Squirrl

1
ya sebenarnya autoplay = 1 sementara? menunjukkan src mungkin memiliki parameter seperti warna, kontrol dan masing-masing dipisahkan oleh & tanda. deskripsi detail dapat dilihat di sini developers.google.com/youtube/player_parameters#Parameters
Waheed ur Rehman

35

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>

14

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>

12

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

rel=0&amp;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>

9

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
});

1
Memanfaatkan jawaban ini, dan membungkus pemilih jQuery di setTimeoutbekerja untuk saya.
tyler.frankenstein

1
Sama di sini, jalankan saja acara itu beberapa kali setiap detik dan itu akan berhasil.
Matthias Kleine

6

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


6

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


1
Alasan Anda tidak bekerja adalah karena Anda sudah ?rel=0ada di sana. Jika Anda menghapus itu akan berhasil. Baca lebih lanjut tentang sintaks string kueri di sini jika Anda mau. ?rel=0?autoplay=1harus berupa ?autoplay=1atau?rel=0&autoplay=1
jaggedsoft

@NextLocal Terima kasih, saya akan kembali ke ini dan mengedit / menghapus jawaban saya lain kali saya mengerjakan sesuatu yang iframe video youtube.
Hastig Zusammenstellen

contoh yang Anda berikan http://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1pasti tidak akan berhasil, tetapi https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1seharusnya
jaggedsoft

@NextLocal Ha, saya mengerti sekarang. Tidak yakin bagaimana saya tidak menyadarinya: D Terima kasih lagi.
Hastig Zusammenstellen

Apakah ada cara untuk menonaktifkan suara ketika video mulai diputar, melalui kode, saya tidak ingin mengejutkan pengguna saya dengan suara
daniel metlitski

3

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>

2

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>

berhasil! Saya tidak tahu mengapa pemuatan halaman hanya menampilkan video kadang-kadang dan tidak kali lain!
shaneonabike

1

1 - tambahkan &enablejsapi=1keIFRAME SRC

2 - fungsi jQuery:

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

Bekerja dengan baik


Dalam kasus saya ini berfungsi dari konsol, atau ketika saya sudah berinteraksi dengan video secara manual. Tidak berfungsi saat dimuat, bahkan kehabisan waktu
mate.gwozdz

0

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


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

0

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}
            />
        )
    }

}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.