My video is too big on safari browser and the volume on the play bar is not showing can someone help, below is an image and the coding i’m using
Topic summary
Main issue: On Safari, an embedded video displays too large and the player’s volume control is missing; it appears fine in other browsers. The embed uses an iframe with inline CSS (width: 100%; height: 400px;).
Attempts to fix:
- Recommend changing CSS to width: 80% and height: 80% for better sizing; no effect.
- Suggest hard-coding a fixed width (e.g., 400px) to constrain the iframe; Safari issue persists.
- Advise refreshing, testing in a private window, and forcing the rule with width: 400px !important to override other styles.
Context/terms:
- Safari is Apple’s browser; behavior differs from other browsers.
- !important is a CSS directive that forces a style to take precedence over other rules.
Status: No confirmed resolution. The Safari-specific sizing and missing volume control remain unresolved after CSS adjustments.
Artifacts: A screenshot and the iframe/code snippet are central to understanding the sizing approach and troubleshooting steps taken.
1 Like
Hello Ecomowner,
For the style section, you should be able to re-size the width of the video on the page from
width: 100%;
The switch it to
width: 80%;
for greater visibility
You can also adjust the height of the video with
height: 80%;
didnt work
Strange, what if you try the following:
width: 400;
You should be able to hard code how many pixels the iframe can take up
no, on other browsers it looks ok but on safari im still having problems
Make sure you refresh the page and check the window in a private tab
The only other alternative would be to add !important
width: 400px !important;