Video element overflows on summary pages when screen width is less than 700 px.

[HarshKapadia2]

We add a video to indicate that we forgot to take a picture during a particular CatchUp session, for example in the 74th CatchUp summary.

We haven't added any size restrictions to that element, so maybe that's why it overflows on screens less than 700 px in width. The page becomes horizontally scrollable and can be zoomed out, when both of those should not be required.

This affects the common summary page and the individual summary pages with such a video included (Eg: 74th CatchUp summary).

One thing to remember while assigning a width would be the we need to maintain the aspect ratio of the video. (This might be achieved using the aspect-ratio property, but this is just a suggestion.)

Normal page load (overflow should not exist):

Zoomed out (should not happen):

[mohitgangwani]

Can you please link how the page is getting rendered? I want to see the html tree

[mohitgangwani]

Proposed solution: an easy fix would be to add width 100% to the styling of the video tag, the video will render according to the size available, taking 100% of it. Tried for multiple devices, it is working.

[mohitgangwani]

Proposed solution: an easy fix would be to add width 100% to the styling of the video tag, the video will render according to the size available, taking 100% of it. Tried for multiple devices, it is working.

Any updates? @HarshKapadia2 @tusharnankani @SirusCodes

[tusharnankani]

Can you please link how the page is getting rendered? I want to see the html tree

Here:

We add a video to indicate that we forgot to take a picture during a particular CatchUp session, for example in the 74th CatchUp summary.

---

Proposed solution: an easy fix would be to add width 100% to the styling of the video tag, the video will render according to the size available, taking 100% of it. Tried for multiple devices, it is working.

Would you like to open a Pull Request? Feel free to make the changes in the /summary/static/css

[mohitgangwani]

Can you please link how the page is getting rendered? I want to see the html tree

Here:

We add a video to indicate that we forgot to take a picture during a particular CatchUp session, for example in the 74th CatchUp summary.

---

Proposed solution: an easy fix would be to add width 100% to the styling of the video tag, the video will render according to the size available, taking 100% of it. Tried for multiple devices, it is working.

Would you like to open a Pull Request? Feel free to make the changes in the /summary/static/css

Alright will do.

[mohitgangwani]

I have created the PR. Well sorry for the commit name, I had updated the commit name where it asks again for some reason it didn't show up.