[SOLVED] How to replace an image called by a menu button with an embedded video

How to replace an image called by a menu button with an embedded video

I'm trying to adapt a web template to fit to my needs. The site looks like this one : http://tomcreus.com At the bottom left there are three buttons (1,2,3) which allow to change the background picture. I want to replace the pics with embedded videos. Is this possible? How difficult it is? Which part of the code do I need to post to help?

EDIT :

<ul class="pagination">
    <li class="current"><a href="images/bg_img1.jpg">1</a></li>
    <li><a href="images/bg_img1.jpg">2</a></li>
    <li><a href="images/bg_img3.jpg">3</a></li>
</ul>

Thank you in advance!

Solution

You can put the video in side your anchor tags like this.

<ul class="pagination">
    <li class="current">
        <a href="https://www.google.com/">
            <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>
        </a>
    </li>
    <li><a href="images/bg_img1.jpg">2</a></li>
    <li><a href="images/bg_img3.jpg">3</a></li>
</ul>

Just change the src of the source elements to a physical video file on your system/server OR give the URL of a video from a website.

EDIT :

This w3schools link can be helpful in embedding a youtube video. And this link is for embedding physical video files in your html.

EDIT :

Check below two question. You might get some direction from there. It is for HTML5