호버를 확장하기 위해 비디오를 얻으려고하고 있지만 작동하지 않고 지혜로 끝납니다.호버상에서 비디오 확장하기
당신이 사용하려고 할 수 있습니다
$("#wd1").mouseenter(function() {
\t vid = document.getElementById("wd1");
\t posTop = $("#wd1").offset().top;
\t posLeft = $("#wd1").offset().left;
\t vidWidth = vid.clientWidth;
\t vidHeight = vid.clientHeight;
\t $("#wd1").remove();
\t vidPlayer = document.createElement('div')
\t vidPlayer.setAttribute("id", "vpId");
\t vidPlayer.style.position = "relative";
\t vidPlayer.style.backgroundColor = "rgba(0,0,0,0.9)"
\t vidPlayer.style.marginTop = posTop;
\t vidPlayer.style.marginLeft = posLeft;
\t vidPlayer.innerHTML = '<video src="public_html/media/VerifiableTerrificHind.mp4" width="'+vidWidth+'" height="'+vidHeight+'" autoplay loop type="video.mp4">';
\t document.getElementsByTagName('body')[0].appendChild(vidPlayer);
\t $("#vpId").hide().fadeIn(2000);
\t $("#vpId").animate({width: "100%", height: "auto"}, 500);
});
#wd1:hover {
\t z-index:1000;
\t margin: 0 auto;
\t width: 50vw;
\t height: auto;
\t display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid">
\t <div class="row">
<div id="box"></div>
\t \t <div class="col-lg-10 col-lg-offset-1">
\t \t <div class="row" id="vpDiv">
\t <div class="col-lg-3">
<video id="wd1" src="https://matthew-williams.000webhostapp.com/media/VerifiableTerrificHind.mp4" alt="my image" width="100%" height="auto" data-video="https://matthew-williams.000webhostapp.com/media/VerifiableTerrificHind.mp4" type="video/mp4">
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
</div>
https://www.jsnippet.net/snippet/1300/
죄송합니다. 브라우저의 현재 위치부터 시작하여 수직 및 수평 가운데로 확장해야합니다. –