我在wordpress中有一个网站，wordpress用于视频使用MediaElement.js库，现在我想在弹出窗口中插入视频，所以当点击按钮在弹出窗口中打开，但我有问题。
当打开弹出窗口时，视频的宽度和高度都很高，这只有在使用css“display：none;”时用于默认隐藏视频。
当视频正常时，这是正确的代码。
<div id="cont-video2" class="" style="max-height: 413px;">
<div class=""> x </div>
<div style="width: 640px; " class="wp-video">
<!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
<span class="mejs-offscreen">Video Player</span>
<div id="mep_0" class="mejs-container svg wp-video-shortcode mejs-video" tabindex="0" role="application" aria-label="Video Player" style="width: 640px; height: 360px;">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<video class="wp-video-shortcode" id="video-219-1" width="640" height="360" preload="metadata" style="width: 100%; height: 100%;" src="http://techslides.com/demos/sample-videos/small.mp4?_=1">
<source type="video/mp4" src="http://techslides.com/demos/sample-videos/small.mp4?_=1"><a href="http://techslides.com/demos/sample-videos/small.mp4">http://techslides.com/demos/sample-videos/small.mp4</a>
</video>
</div>
<div class="mejs-layers">
<div class="mejs-poster mejs-layer" style="display: none; width: 100%; height: 100%;"></div>
<div class="mejs-overlay mejs-layer" style="width: 100%; height: 100%; display: none;">
<div class="mejs-overlay-loading"><span></span>
</div>
</div>
<div class="mejs-overlay mejs-layer" style="display: none; width: 100%; height: 100%;">
<div class="mejs-overlay-error"></div>
</div>
<div class="mejs-overlay mejs-layer mejs-overlay-play" style="width: 100%; height: 100%;">
<div class="mejs-overlay-button"></div>
</div>
</div>
<div class="mejs-controls" style="display: block; visibility: hidden;">
<div class="mejs-button mejs-playpause-button mejs-play">
<button type="button" aria-controls="mep_0" title="Play" aria-label="Play"></button>
</div>
<div class="mejs-time mejs-currenttime-container" role="timer" aria-live="off"><span class="mejs-currenttime">00:00</span>
</div>
<div class="mejs-time-rail" style="width: 496px;"><span class="mejs-time-total mejs-time-slider" style="width: 486px;"><span class="mejs-time-buffering" style="display: none;"></span><span class="mejs-time-loaded" style="width: 9.81818px;"></span><span class="mejs-time-current" style="width: 0px;"></span><span class="mejs-time-handle" style="left: -5px;"></span><span class="mejs-time-float"><span class="mejs-time-float-current">00:00</span><span class="mejs-time-float-corner"></span></span>
</span>
</div>
<div class="mejs-time mejs-duration-container"><span class="mejs-duration">00:29</span>
</div>
<div class="mejs-button mejs-volume-button mejs-mute">
<button type="button" aria-controls="mep_0" title="Muto" aria-label="Muto"></button><a href="javascript:void(0);" class="mejs-volume-slider" style="display: none;" aria-label="volumeSlider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" aria-valuetext="80%" role="slider" tabindex="0"><span class="mejs-offscreen">Use Up/Down Arrow keys to increase or decrease volume.</span><div class="mejs-volume-total"></div><div class="mejs-volume-current" style="height: 80px; top: 28px;"></div><div class="mejs-volume-handle" style="top: 25px;"></div></a>
</div>
<div class="mejs-button mejs-fullscreen-button">
<button type="button" aria-controls="mep_0" title="Schermo intero" aria-label="Schermo intero"></button>
</div>
</div>
<div class="mejs-clear"></div>
</div>
</div>
</div>
</div>
<div id="cont-video2" class="" style="max-height: 413px;">
<div class=""> x </div>
<div style="width: 640px; " class="wp-video">
<!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
<span class="mejs-offscreen">Video Player</span>
<div id="mep_0" class="mejs-container svg wp-video-shortcode mejs-video" tabindex="0" role="application" aria-label="Video Player" style="width: 640px; height: 360px;">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<video class="wp-video-shortcode" id="video-219-1" width="640" height="360" preload="metadata" style="width: 100%; height: 100%;" src="http://techslides.com/demos/sample-videos/small.mp4?_=1">
<source type="video/mp4" src="http://techslides.com/demos/sample-videos/small.mp4?_=1"><a href="http://techslides.com/demos/sample-videos/small.mp4">http://techslides.com/demos/sample-videos/small.mp4</a>
</video>
</div>
<div class="mejs-layers">
<div class="mejs-poster mejs-layer" style="display: none; width: 100%; height: 100%;"></div>
<div class="mejs-overlay mejs-layer" style="width: 100%; height: 100%; display: none;">
<div class="mejs-overlay-loading"><span></span>
</div>
</div>
<div class="mejs-overlay mejs-layer" style="display: none; width: 100%; height: 100%;">
<div class="mejs-overlay-error"></div>
</div>
<div class="mejs-overlay mejs-layer mejs-overlay-play" style="width: 100%; height: 100%;">
<div class="mejs-overlay-button"></div>
</div>
</div>
<div class="mejs-controls" style="display: block; visibility: hidden;">
<div class="mejs-button mejs-playpause-button mejs-play">
<button type="button" aria-controls="mep_0" title="Play" aria-label="Play"></button>
</div>
<div class="mejs-time mejs-currenttime-container" role="timer" aria-live="off"><span class="mejs-currenttime">00:00</span>
</div>
<div class="mejs-time-rail" style="width: 496px;"><span class="mejs-time-total mejs-time-slider" style="width: 486px;"><span class="mejs-time-buffering" style="display: none;"></span><span class="mejs-time-loaded" style="width: 9.81818px;"></span><span class="mejs-time-current" style="width: 0px;"></span><span class="mejs-time-handle" style="left: -5px;"></span><span class="mejs-time-float"><span class="mejs-time-float-current">00:00</span><span class="mejs-time-float-corner"></span></span>
</span>
</div>
<div class="mejs-time mejs-duration-container"><span class="mejs-duration">00:29</span>
</div>
<div class="mejs-button mejs-volume-button mejs-mute">
<button type="button" aria-controls="mep_0" title="Muto" aria-label="Muto"></button><a href="javascript:void(0);" class="mejs-volume-slider" style="display: none;" aria-label="volumeSlider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" aria-valuetext="80%" role="slider" tabindex="0"><span class="mejs-offscreen">Use Up/Down Arrow keys to increase or decrease volume.</span><div class="mejs-volume-total"></div><div class="mejs-volume-current" style="height: 80px; top: 28px;"></div><div class="mejs-volume-handle" style="top: 25px;"></div></a>
</div>
<div class="mejs-button mejs-fullscreen-button">
<button type="button" aria-controls="mep_0" title="Schermo intero" aria-label="Schermo intero"></button>
</div>
</div>
<div class="mejs-clear"></div>
</div>
</div>
</div>
</div>
但是如果添加到css #cont-video2 {display:none;}然后使用jquery的点击操作在弹出窗口中打开视频我会看到大尺寸的视频
为什么这个？
更新
我使用position: absolute; top: -9999px; left: -9999px;而不是display: none ;解决了它并且它正常工作。