ビデオをホバリングで展開する

Question

ホバリングで拡大するビデオを取得しようとしていますが、動作していないため、私はウィットの終わりです。 （ブートストラップ/ wのDreameaverのCC 2015を使用して）

$("#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/

Answer 1

あなたは、使用しようとすることができます。

#wd1:hover { 
    z-index:1000; 
    margin: 0 auto; 
    width: 50vw; 
    height: auto; 
    display: block; 
    transform: translateX(25%) translateY(25%); 
    -webkit-transform: translate(25%, 25%); 
    -webkit-transition: all 0.2s linear; 
     -moz-transition: all 0.2s linear; 
     -ms-transition: all 0.2s linear; 
     -o-transition: all 0.2s linear; 
      transition: all 0.2s linear; 
} 

あなたは値の周りに再生することができますtranslateX()、およびtranslateY()。