bxslider에서 youtube 동영상 자동 재생하는 방법 문의드립니다.

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