چطور میشه یک فایل ویدویی رو به صفحه اضافه کرد ؟

بدون استفاده از ماژول هایی که وجود داره در ضمن من این کار رو انجام دادم و به ماژول اچ تی ام ال هم ستایل ها و اسکریپت های لازم رو دادم اما به محض اینکه می خواد صفحه لود بشه و فیلم نمایش داده بشه چند ثانیه اول نمایش داده میشه بعد کامل از صفحه خارج میشه !

اینم کدهایی که استفاده کردم :

<div class="container" style="direction: ltr;">

<div class="video-wrap">

<div class="video-inner">

<video class="video-player" src="/portals/0/video/file.mp4" type="video/mp4" controls="controls" poster="media/woods.jpg" preload="auto" style="width: 800px;">

<source src="/portals/0/media/woods.webm" type="video/webm; codecs='vp8.0, vorbis'"></source>

<source src="/portals/0/media/woods.ogg" type="video/ogg; codecs='theora, vorbis'"></source>

<source src="/portals/0/media/woods.mp4" type="video/mp4; codecs='avc1.4D401E, mp4a.40.2'"></source>

<p>Sorry, but your browser does not support this video format.</p>

</video>

<button class="action action--close"><em class="fa fa-close"></em><span class="action__label action__label--hidden">Close preview</span></button>

</div>

<!-- /video-inner -->

</div>

<!-- /video-wrap-->

<div class="content">

<div class="loader">

<em class="fa fa-spinner fa-pulse"></em>

</div>

<button class="action action--hidden action--play">

<em class="fa fa-play"></em><span class="action__label">Watch the video</span>

</button>

</div>

</div>