iframe에 자동 재생 YouTube 비디오를 삽입하려면 어떻게 해야 합니까?

iframe에 자동 재생 YouTube 비디오를 삽입하려면 어떻게 해야 합니까?

새로운 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 임베디드용 JavaScript API는 존재하지만 아직 실험적인 기능으로 게시되어 있습니다.

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

2018년 4월부터 구글은 자동 재생 정책을 일부 변경했습니다.추가만 필요한 것은 아닙니다.autoplay=1쿼리 매개 변수로서도 사용할 수 있습니다.allow='autoplay'iframe의 속성으로서

따라서 다음과 같은 작업을 수행해야 합니다.

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

2018년 8월 iframe 구현에 대한 실행 예를 찾을 수 없었습니다.다른 질문들은 Chrome에만 관련된 것이었고, Chrome에 대한 질문이 조금 있었다.

당신은 음소거해야 할 것이다.mute=1크롬을 자동으로 재생하기 위해서입니다.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>

유튜브의 임베디드 코드는 기본적으로 자동 재생이 해제되어 있습니다.간단하게 추가autoplay=1"src" 애트리뷰트의 마지막에 표시됩니다.예를 들어 다음과 같습니다.

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

iframe src 끝에 추가&enablejsapi=1비디오에서 js API를 사용할 수 있도록 합니다.

그런 다음 jquery로:

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

그러면 document.ready에서 비디오가 자동으로 재생됩니다.

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

더 중요한 것은 모바일 장치에서 비디오를 자동 시작할 수 없기 때문에 사용자는 비디오를 시작하려면 비디오 플레이어 자체를 클릭해야 합니다.

편집: YouTube가 비디오를 로드하고 있을 가능성이 있기 때문에 실제로 iframe이 준비될지 100% 확신할 수 없습니다.실제로 클릭 기능 내에서 이 기능을 사용하고 있습니다.

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

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 및 OBJECT 임베디드에서 사용할 수 있는 플래그 또는 파라미터에 대해 설명합니다.또, 어떤 파라미터가 어떤 플레이어와 동작하는지에 대해서도 명확하게 설명합니다.

YouTube 임베디드 플레이어 및 플레이어 파라미터

보시면 알 수 있습니다.autoplayAS3, AS2, HTML5)를 사용합니다.

모르는 사람을 위한 여러 질의 힌트(과거 나 및 미래의 나)

just url을 ?autoplay=1mjhm의 답변과 같이 동작합니다.

<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의 답변을 참조하십시오.

현재는 iframe 태그에 "allow"라는 새로운 속성을 포함하고 있습니다.다음은 예를 제시하겠습니다.

allow="수광계, 자동 재생, 암호화된 미디어, 자이로스코프, 픽처 인 픽처"

마지막 코드는 다음과 같습니다.

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

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>

- add 1 - 가 1&enablejsapi=1로로 합니다.IFRAME SRC

2 - jQuery 펑크:

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

정상적으로 동작합니다.

이것은, 고객이 찾고 있는 경우에 최적인 솔루션이며, 여기서 중요한 것은 autoplay*입니다.이것은 어디에도 언급되어 있지 않습니다.

  <iframe allow="autoplay *; fullscreen *" allowfullscreen="true" 
      src="https://example.com">
   </iframe>

그리고 유튜브 영상을 완전히 게을리 하고 싶다면-

  <iframe
        srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/unICbsPGFIA?autoplay=1><img src=https://img.youtube.com/vi/zEkgWzi5T-Y/hqdefault.jpg><span>▶</span></a>"
        src="https://www.youtube.com/embed/unICbsPGFIA?autoplay=1&loop=1&playlist=zEkgWzi5T-Y"
        frameborder="0"
        allow="accelerometer; autoplay *; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>

javascript 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로 유튜브를 재생하려면:

swfobject.embedSWF

레퍼런스: https://developers.google.com/youtube/js_api_referencemagazine

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

리액션용 자동 재생, 루프, 뮤트 유튜브 비디오를 찾고 있습니다.

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

라이브러리로 해결책을 찾았어요 리액트-유튜브

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

}

예, Google의 자동 재생 Iframe 정책에 따라 Iframe 태그를 사용하여 YouTube 동영상을 자동 재생할 수 있습니다.

다음과 같이 시도해 보십시오.

<iframe src="https://www.youtube.com/embed/video-id" frameborder="0" allow="autoplay; fullscreen"></iframe>

이 과정은 한 번에 하나의 비디오에만 적용되지만 Iframe 코드를 사용하여 YouTube 비디오 컬렉션을 포함하려면 사용자가 YouTube Widget 형식으로 YouTube 비디오, 쇼츠 및 플레이리스트 URL을 포함시킬 수 있는 Google API와 통합된 Taggbox Widget과 같은 서드파티 도구를 사용해야 합니다.

또한 생성된 Iframe 코드를 사용하여 응답성이 뛰어난 YouTube 위젯을 웹 사이트에 쉽게 삽입할 수 있습니다.

<iframe src="https://widget.taggbox.com/unique-id" style="width:100%;height:600px;border:none;"></iframe>

언급URL : https://stackoverflow.com/questions/7281765/how-to-embed-an-autoplaying-youtube-video-in-an-iframe