Environment Surrounding Your Video

The HTML video tag can be bordered like the HTML div can. And, like a div, the video tag can be placed over images to give it a special environment.

The environment where your video is playing may make a difference in how it is perceived. A video about Christmas is likely to have more emotional impact surrounded by Christmas colors or icons than the same video surrounded by a huge yellow frame.

For a demonstration video about pink heart-shaped candy, I chose an image of a deer that I imagine is sounding a mating call.

(The video used in the demonstration is one of several embedded in a free online recipe book. To see the others, open the Cherry-Flavored White Chocolate Hearts book.)

The Videos From Your Website Willmaster Library article describes how to use the video tag to publish your own video on your own website.

To place a video on top of an image, put the image in a div with style="position:relative;"

Then, give the video tag a CSS position:absolute;, along with top, right, bottom, or left properties as needed to position it within the image area.

Here is the code for the example. The positioning CSS is in blue.

<div style="position:relative;">
<img src="https://www.willmaster.com//possibilities/images/202212201221_videoFrame.jpg" style="max-width:100%; border-radius:9px;">
   <video controls style="position:absolute; left:10px; bottom:15px; width:70%;">
   <source src="https://willbontrager.com/books/hearts/assets/MVI_4185(keep)unmold.mp4" type="video/mp4">
   </video>
</div>

Perhaps the demonstration has kicked your imagination into high gear.

Will Bontrager