bxslider에서 youtube 동영상 자동 재생하는 방법 문의드립니다.
본문
홈페이지 주소는 http://osanchurch.net/ 입니다.
bxslider에서 유튜브 영상을 자동 재생하려고 하는데, 재생이 안되고 자동으로 다음 화면으로 넘어가 버립니다.
무엇을 수정해야 될 지 알려주시면 고맙겠습니다.
<script src="/js/jquery.bxslider.js"></script>
<div id="main_visual">
<div class="slide">
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
mode:'fade',
controls:false,
pager:true,
auto:true,
autoControls:false
});
$('.bxslider2').bxSlider({
mode:'horizontal',
auto:true,
autoControls:false,
auto:true,
controls:false
});
});
</script>
<script type="text/javascript">
$(window).resize(function(){resizeYoutube();});
$(function(){resizeYoutube();});
function resizeYoutube(){ $("iframe").each(function(){ if( /^https?:\/\/www.youtube.com\/embed\//g.test($(this).attr("src")) ){ $(this).css("width","100%"); $(this).css("height",Math.ceil( parseInt($(this).css("width")) * 480 / 854 ) + "px");} }); }
</script>
<ul class="bxslider">
<li>
<iframe width="484" height="272" src="https://www.youtube.com/embed/XYiEe3MNfiM?rel=0&autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- <div style="padding:46.41% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/784455862?h=6ebbe157b5&autoplay=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script> -->
</li>
<li>
<img class="slideimg" src="/img/visual_1.png" alt="">
</li>
<li>
<img class="slideimg" src="/img/visual_2-221012.png" alt="">
</li>
<li>
<img class="slideimg" src="/img/visual_3-221012.png" alt="">
</li>
<li>
<img class="slideimg" src="/img/visual_4-221013.png" alt="">
</li>
</ul>
</div>
</div>
답변 3
https://developer.chrome.com/blog/autoplay/
음소거 상태에서만 autoplay 가 가능합니다.
<iframe width="484" height="272" src="https://www.youtube.com/embed/XYiEe3MNfiM?rel=0&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
자동재생을 받아들이는 최종 유저 입장에서
어떤 이에게는 원치 않는 컨텐츠일 수 있고
그것은 곧 권리침해 입니다.
iframe 자동 재생 관련 검색해보시고요
bx슬라이드에 관한 옵션 검색해보시고요
이참에 만드시는거 자주 쓰이는 것들이니
충분히 검색 하시는 것을 추천드립니다.
유튜브 자동재생은 아예 없는 것으로 생각하는 것이 정신건강에 이롭습니다.^^
유튜브 고화질은 기가급인데 자동재생으로 홈페이지에 띄우면 모바일로 입방하는 회원중에 와이파이 환경이 아닌 곳에서 무심코 들어왔다가 본의 아니게 데이터 다 빨려 드십니다.
다른 이유도 있지만 이 이유가 자동재생에 제한을 주는 가장 큰 이유입니다.
답변을 작성하시기 전에 로그인 해주세요.