Multiple videos side-by-side with IPython Display

Question

I have been using the useful answer suggested in this StackOverflow post to view multiple videos at once in Jupyter Notebook. Essentially, HTML doesn't seem to be working but IPython does so something like this (given a list of filepaths to the desired videos) works magic:

from IPython import display

for filepath in filepaths:
    display.display(display.Video(filepath, embed=True))

Now I get all the videos displayed in the output. However, these videos are vertically stacked. There is a lot of space to the side and it would be ideal to place them side-by-side first rather than vertically so I can easily see them on the screen together. How can I do this?

Answer 1

You can do this with ipywidgets : Display the videos within a ipywidgets.Output widget, and then use ipywidgets.GridspecLayout to arange your widgets. Here is an example:

from ipywidgets import Output, GridspecLayout
from IPython import display

grid = GridspecLayout(1, len(filepaths))

for i, filepath in enumerate(filepaths):
    out = Output()
    with out:
        display.display(display.Video(filepath, embed=True))
    grid[0, i] = out

grid

Answer 2

This works fine in Colab for me:

from IPython.display import HTML
from base64 import b64encode

html_str=""

for filepath in filepaths:
  mp4 = open(filepath,'rb').read()
  data_url = "data:video/mp4;base64," + b64encode(mp4).decode()
  html_str += """
  <video width=400 controls>
        <source src="%s" type="video/mp4">
  </video>
  """ % data_url
HTML(html_str)