These videos have been produced for the lectures "cosmology of the dark universe", they show the evolution of baryons and cold dark matter perturbation obtained by solving the Einstein-Boltzmann equation using the numerical code CAMB.
Since I have no html or javascript knowledge I used chat-gpt to write the page for me, after some trial and error, here are the prompts that worked
"Can you write the source code for a web page using html and javascript. The page will consist of a title, a paragraph of text, and then a video player with a graphical interface. The graphical interface will help the user to choose which video to play. I have 4 videos, with name format 2d_XXX_synchronous_lcdm_YYY.mp4, where XXX can be {baryons, cdm} and YYY can be {post_decoupling, pre_decoupling}. I want the baryons and cdm video to always be played together side by side, their total combined width will be half a page width. the user will only specify if it's pre or post decoupling, and he/she will use a general play button at the top to play the videos."
"ok this is not bad, but the play button here only switch between pre and post decoupling, but doesn't play the video, can you fix that, also, can you put the play button at the top"