반응형 웹 html youtube 동영상 검은여백 없이 꽉차게 나오게 하는 법 질문 그대로 입니다. 수정을 부탁받았는데 제가 짠 코드가 아니라 손을 어떻게 대야할지 감이 안오네요

현재 상태 : 반응형 웹 입니다. play 하기 전의 화면은 여백 없이 꽉 차는데 플레이 하면 youtube 동영상이 검은 액자처럼 테두리가 생깁니다. autoplay 가 설정되어있어서 처음부터 플레이가 되는데 그럴땐 처음부터 여백이 있는 상태고 영상이 끝나고 화면이 꽉 찹니다.

원하는 것 : 동영상이 여백 없이 꽉 차게 나왔으면 좋겠습니다.

해본 것 : padding_bottom 비율을 조절하면 된다고 해서 그렇게 해봤는데도 안됩니다.. 흠

<%@ page contentType="text/html; charset=utf-8" %>
<%@ page import="com.vizensoft.board.notice.*" %>
<%@ page import="com.vizensoft.config.SiteProperty" %>
<%@ page import="com.vizensoft.management.branch.*" %>
<%@ page import="com.vizensoft.util.*" %>
<%@ page import="java.util.*" %>
<%
    NoticeVO param2 = NoticeVO.getParam(99, "visual", request);
    NoticeDAO notice = NoticeDAO.getInstance();
    param2.setSmain("1");

    ArrayList<NoticeVO> list = notice.list(param2);
    NoticeVO ctr = notice.readVs();
    String uploadPath2   = "/upload/notice/";                   // 파일, 동영상 첨부 경로
    boolean youtube =  false;

    String movie = "";
    for(int i=0;i<list.size();i++){
        if(Function.checkNull( list.get(i).getFilename() ).contains("youtu.be")){
            movie = list.get(i).getFilename().substring(list.get(i).getFilename().lastIndexOf("/"));
            youtube = true;
            break;
        }
        if(list.get(i).getMoviename() != null){
            movie = list.get(i).getMoviename();
            break;
        }
    }
%>
<style>
    .ytp-large-play-button{display:none !important; opacity:0 !important;}
    .ytp-share-panel{display:none !important; opacity:0 !important;}
    .ytp-watermark{display:none !important;}
    .ytp-hide-controls{display:none !important; opacity:0 !important;}


</style>
<div class="main_visual" id="intro" style="margin-top:62px;">
    <div class="mv_slide">
            <%if(ctr.getName().equals("0")){ %>
        <ul class="imgArea">
            <%for(int i=0;i<list.size();i++){
                    if(list.get(i).getMain().equals("1") && list.get(i).getFilename() != null && !"".equals(list.get(i).getFilename())){
            %>
            <li>
                <img src="<%=uploadPath2 %><%=list.get(i).getFilename()%>" class="pc_img" />
                <img src="<%=uploadPath2 %><%=list.get(i).getFilename()%>" class="mo_img" />
                <div class="text_wrap w1200">
                    <h2>
                        <%=list.get(i).getContents() %>
                    </h2>
                    <p><%=list.get(i).getTitle() %> </p>
                </div>
            </li>
            <%}
                }%>
        </ul>
            <%}else{ %>
            <% if(youtube){%>
        <ul>
            <li>
            <!--
                <iframe src="https://www.youtube.com/embed/<%=movie%>?wmode=transparent&amp;rel=0&amp;autoplay=1&amp;controls=0&enablejsapi=1&version=2&playerapiid=ytplayer&modestbranding=1&amp;loop=1&rel=0&disablekb=1&showinfo=0&amp;vq=hd720" style="width:100%;" frameborder="0" type="application/x-shockwave-flash" allowfullscreen="true" invokeurls="false" allowscriptaccess="never" allownetworking="all" enablehtmlaccess="false" allowhtmlpopupwindow="true"></iframe>
                <iframe src="https://www.youtube.com/embed/<%=movie%>?wmode=transparent&amp;rel=0&amp;autoplay=1&amp;controls=0&enablejsapi=1&version=2&playerapiid=ytplayer&amp;loop=1&rel=0&disablekb=1&showinfo=0&amp;vq=hd720&ps=blogger&modestbranding=1" width="100%"  allowfullscreen frameborder="0" ></iframe>
            -->

                <iframe src="https://www.youtube.com/embed/<%=movie%>?wmode=transparent&amp;rel=0&autoplay=1&amp;controls=0&enablejsapi=1&version=3&playerapiid=ytplayer&modestbranding=1&amp;loop=1&disablekb=1&showinfo=1" width="100%"  allowfullscreen frameborder="0" ></iframe>
            </li>



            <script>
                var video_h = $(window).width() * 0.4166;
                $(".mv_slide ul li iframe").css({"height": video_h, "width":"100%"});
                $(".main_visual").css("height","auto");
                $(".main_visual .mv_slide ul li ").css("height","auto");                $(".main_visual").css("height","auto");
                $(window).resize(function(){
                    var video_h = $(window).width() * 0.4166;
                    $(".main_visual .bx-wrapper .bx-viewport").css("height", video_h );
                    $(".main_visual ul li iframe").css("height", video_h );
                });

                $('.ytp-watermark').css('display', 'none');
            </script>
        </ul>
            <% }else{ %>
        <ul>
            <li>
                <video src="<%=uploadPath2 %><%=movie%>" autoplay="autoplay" class="pc_img" muted="false"  ></video>
                <video src="<%=uploadPath2 %><%=movie%>" autoplay="autoplay" class="mo_img" muted="false"  ></video>
            </li>
        </ul>
            <% } %>
            <%} %>

    </div>
    <div>
        <!--<div class="bottom_bar"></div>-->
        <!-- <div class="mouse">
            <a href="#about"><img src="/img/mouse_img.png" /></a>
        </div> -->
    </div>
</div>

<script>
    var mv_slide = $(".mv_slide ul.imgArea").bxSlider({
        auto : true,
        pause: 2500,
        pager : true,
        controls : true
    });
</script>