자동 재생 YouTube 동영상을 iframe에 포함시키는 방법은 무엇입니까?

새로운 iframe 버전의 YouTube 동영상을 포함시키고 자동으로 재생하려고합니다.

내가 알 수있는 한, URL에 플래그를 수정 하여이 작업을 수행 할 수있는 방법이 없습니다. JavaScript 및 API를 사용하여이를 수행 할 수있는 방법이 있습니까?

Chrome에서는 작동하지만 Firefox 3.6에서는 작동하지 않습니다 (경고 : RickRoll 비디오).

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

iframe을 삽입의 자바 스크립트 API는 존재하지만 아직 실험적인 기능으로 게시됩니다.

업데이트 : iframe API가 이제 완전히 지원되며 "YT.Player 객체 생성-예제 2" 는 JavaScript에서 "자동 재생"을 설정하는 방법을 보여줍니다.

내장 된 youtube 코드는 기본적으로 자동 재생 기능이 꺼져 있습니다. autoplay=1"src"속성의 끝에 추가하십시오 . 예를 들면 다음과 같습니다.

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

2018 년 4 월부터 Google은 자동 재생 정책 을 일부 변경했습니다 . 따라서 다음과 같이해야합니다.

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

2018 년 8 월 iframe 구현에 대한 실제 예를 찾지 못했습니다. 다른 질문은 Chrome에만 관련이 있었으며 조금만 버렸습니다.

mute=1Chrome에서 자동 재생하려면 소리를 소거해야합니다 . FF와 IE는 autoplay=1매개 변수로 사용 하면 정상적으로 작동하는 것 같습니다 .

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

자동 재생이 포함 된 YouTube 동영상을 포함하고 클립 끝에 추천 동영상이없는 방법에 대한 2014 iframe 삽입

rel=0&autoplay 

아래 예 :.

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

iframe src의 끝에 &enablejsapi=1js API를 비디오에 사용할 수 있도록 추가

그런 다음 jquery를 사용하십시오.

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

문서에서 비디오를 자동으로 재생해야합니다.

클릭 기능 내에서 이것을 사용하여 다른 요소를 클릭하여 비디오를 시작할 수도 있습니다.

더 중요한 것은 모바일 장치에서 비디오를 자동 시작할 수 없으므로 사용자는 비디오 플레이어를 클릭해야 비디오를 시작할 수 있습니다

편집 : 나는 실제로 100 % 확신하지 못합니다 .YouTube가 여전히 비디오를로드 할 수 있기 때문에 iframe이 준비되었습니다. 실제로 클릭 기능 내 에서이 기능을 사용하고 있습니다.

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

IFRAME 및 OBJECT 임베드에 사용할 수 있는 플래그 또는 매개 변수는 여기에 문서화되어 있습니다. 어떤 매개 변수가 어떤 플레이어와 작동하는지에 대한 세부 사항도 분명히 언급됩니다.

YouTube 내장 플레이어 및 플레이어 매개 변수

autoplay모든 플레이어 (AS3, AS2 및 HTML5)에서 지원하는 것을 알 수 있습니다.

모르는 사람들을위한 여러 쿼리 팁 (과거와 미래)

URL로 단일 쿼리를 만드는 경우 mjhm의 답변에 표시된 것처럼 ?autoplay=1작동합니다.

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

여러 개의 쿼리를 작성하는 경우 첫 번째 쿼리는 ?잠시 시작하고 나머지는 a&

관련 동영상을 끄고 자동 재생을 사용하고 싶다고 가정 해 보겠습니다.

이 작동합니다

<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의 회신을 읽으십시오.

mjhm이 2018 년 5 월 Chrome 66에서 작업을 수락 allow=autoplay하도록하기 위해 iframe과 enable_js=1쿼리 문자열에 추가했습니다.

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

요즘에는 iframe 태그에 새 속성 "allow"를 포함시킵니다. 예를 들면 다음과 같습니다.

allow = "가속도계; 자동 재생; 암호화 된 매체; 자이로 스코프; PIP"

최종 코드는 다음과 같습니다.

<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 - 추가 &enablejsapi=1로IFRAME SRC

2-jQuery 기능 :

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

잘 작동

자바 스크립트 API를 사용하려면

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

ID로 YouTube를 재생하려면 :

swfobject.embedSWF

참조 : https://developers.google.com/youtube/js_api_reference 잡지

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

2018 년 12 월

반응 할 AUTOPLAY, LOOP, MUTE YouTube 동영상을 찾고 있습니다.

다른 답변은 효과가 없었습니다.

라이브러리로 해결책을 찾았습니다 : 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}
            />
        )
    }

}