show_video()

Contents

show_video()#

show_video(videoPath, width=”75%”, videoType=”video/mp4”)

This function displays a video file directly inside a Jupyter notebook using a clean, styled HTML tag. It lets you specify:

  • The file path to your video,

  • The display width (with responsive auto height),

  • The MIME type (like video/mp4).

It also adds a border, rounded corners, and a subtle drop shadow for a polished look.

This is perfect for:

  • Showing animations of structural models, finite element analyses, or simulation results.

  • Demonstrating time-lapse experiments or visualization outputs.

  • Embedding any local or served video file in your notebooks.

Typical use#

show_video("results/animation.mp4", width="50%")

This will embed the video at half the width of your notebook cell.

Files#

You can find these files in Community Data.

show_video.py
def show_video(videoPath, width="100%", videoType="video/mp4"):
    """
    Display a video file in a Jupyter notebook with styled HTML.

    This function embeds a video using an HTML <video> tag, adds 
    borders, rounded corners, and a drop shadow for clean presentation.

    Parameters
    ----------
    videoPath : str
        Path to the video file (local or relative to the notebook).

    width : str, default="75%"
        CSS width to display the video. Height is set to auto.

    videoType : str, default="video/mp4"
        MIME type of the video. Use "video/webm", etc. if needed.

    Returns
    -------
    None
        Displays the video directly in the notebook cell.

    Example
    -------
    show_video("results/animation.mp4", width="50%")

    Author
    ------
    Silvia Mazzoni, DesignSafe (silviamazzoni@yahoo.com)

    Date
    ----
    2025-08-14

    Version
    -------
    1.0
    """

    from IPython.display import HTML
    html = f"""
    <video controls style="width: {width}; height: auto; display: block; margin: 20px; 
        border: 3px solid black; border-radius: 6px; box-shadow: 5px 5px 15px rgba(0,0,0,0.5);">
      <source src="{videoPath}" type="{videoType}">
      Your browser does not support the video tag.
    </video>
    """
    display(HTML(html))
Contents