html5 - How do I add header to each video in a row of videos? -
i have row of videos this:
<!-- video #1 start --> <video width="30%" controls> <source src="videos/video1.mp4" type="video/mp4"> should seeing video right now, have failed webmasters. </video> <!-- video #1 end --> <!-- video #2 start --> <video width="30%" controls> <source src="videos/video2.mp4" type="video/mp4"> should seeing video right now, have failed webmasters. </video> <!-- video #2 end --> <!-- video #3 start --> <video width="30%" controls> <source src="videos/video3.mp4" type="video/mp4"> should seeing video right now, have failed webmasters. </video> <!-- video #3 end -->
i trying add titles each video layout this:
title #1 title #2 title #3 video #1 video #2 video #3
here best attempt, despite failure:
<!-- video #1 start --> <h3>video #1</h3> <video width="30%" controls> <source src="videos/video1.mp4" type="video/mp4"> should seeing video right now, have failed webmasters. </video> <!-- video #1 end --> <!-- video #2 start --> <h3>video #2</h3> <video width="30%" controls> <source src="videos/video2.mp4" type="video/mp4"> should seeing video right now, have failed webmasters. </video> <!-- video #2 end --> <!-- video #3 start --> <h3>video #3</h3> <video width="30%" controls> <source src="videos/video3.mp4" type="video/mp4"> should seeing video right now, have failed webmasters. </video> <!-- video #3 end -->
how can add title each video while maintaining desired layout?
deleted code. here snippet appears working, have deleted src attribute in order make jsfiddle work.
try this: http://jsfiddle.net/ue8e1004/
<h3 style="width: 30%;float:left;">your title.</h3> <h3 style="width: 30%;float:left;">your title.</h3> <h3 style="width: 30%;float:left;">your title.</h3> <div class="clearfix"></div> <!-- video #1 start --> <video width="30%" controls> should seeing video right now, have failed webmasters. </video> <!-- video #1 end --> <!-- video #2 start --> <video width="30%" controls> should seeing video right now, have failed webmasters. </video> <!-- video #2 end --> <!-- video #3 start --> <video width="30%" controls> should seeing video right now, have failed webmasters. </video>