Question

How do I put a < video > in <li><a href="#"><p>Ethnics</p></a></li>

Using the video as below:

<video width="320" height="270" controls>
<source src="steve_powell_320_hard.mp4"  type="video/mp4; codecs=avc1.42E01E, mp4a.40.2">
<source src="steve_powell_320_hard.webm" type="video/webm; codecs=vp8, vorbis">
<source src="steve_powell_320_hard.ogv"  type="video/ogg; codecs=theora, vorbis">
</video>

UPDATE for Šime Vidas
HTML

<ul class="lists_video" id="list">
        <li><a href="#" class="video_trigger">Ethnics</a><video width="320" height="270" controls>
                    <source src="video/steve_powell_320_hard.mp4"  type="video/mp4; codecs=avc1.42E01E, mp4a.40.2">
                    <source src="video/steve_powell_320_hard.webm" type="video/webm; codecs=vp8, vorbis">
                    <source src="video/steve_powell_320_hard.ogv"  type="video/ogg; codecs=theora, vorbis"></video></li>
        </ul> 

CSS and JS as suggested by Šime Vidas with sample codes.

Answer 1

HTML:

<ul id="list">
    <li>
        <a href="#" class="video_trigger">Ethnics</a>
        <video width="320" height="270" controls>
            <!-- your <source> elems here -->
        </video>
    </li>
</ul>

CSS:

#list video { display: none; }

JavaScript:

$( '#list' ).on( 'click', '.video_trigger', function () {
    $( this ).siblings( 'video' ).show();
});

So, you hide the VIDEO element(s) initially with CSS. Then, when a .video_trigger anchor is clicked, its corresponding VIDEO element is displayed.