{"version":"1.0","type":"rich","title":"Responsive Video Resize 16:9","description":"This example demonstrates a responsive video player that maintains a 16:9 aspect ratio within its container. It shows how the video element automatically adjusts its dimensions based on available space, prioritizing either width or height depending on the container’s proportions. The code uses vanilla JavaScript with the `clientWidth` and `clientHeight` properties to measure the parent element, then directly manipulates the video’s `style.width` and `style.height` properties. It compares the container’s aspect ratio against the target 16:9 ratio to determine whether to constrain by width or height. No external libraries are required; the logic relies solely on DOM element references and inline style updates.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-9c6026cff4208b82ed24fda17c01161e?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}