nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Embedded YouTube Videos on Mobile

Patrick Cole

We recently redesigned our site on BBNC with the help of a Blackbaud designer. He did a great job of making sure our site is mobile-friendly in all aspects. However, I have recently embedded a YouTube video in our donation pages and it is not displaying very nicely on mobile (all other parts are).

https://giving.jwu.edu/donate

The width of the video does not adjust to mobile, and it remains center-aligned. Does anyone have any advice on how to make the embedded YouTube video fall in line with the rest of the site on mobile?

Find more posts tagged with

NetCommunity

Comments

David Seager

Hey Patrick Cole‍

David from Blackbaud support here, most of the site we build have a CSS class for mobile-friendly content, looking at the page in question the root cause is that the iframe dimensions are set to a certain height (560x315) screenshot reference https://www.screencast.com/t/2hpoucq9sH

What I would suggest would be to reach out to the designer you worked with to see if they can provide the CSS class, like responsive or video-responsive, or video-overlay. The other method is adding attributes to make the video 100% width and set the height to auto in the HTML code so it auto adjusts but that would have to be adjusted per video and if you are comfortable with making HTML/CSS edits on your own.

let me know if you have questions