YouTube video, pre-load, is too big on smart phones

Before you click on it to load, the YouTube video at the bottom of our home page fits nicely on the page - when viewed with a browser on the desktop. When viewed on a smart phone, it is too big - wider and taller than the other videos on that page.

All the videos on the World Champions tab are normal size on a Desktop and too big on a smart phone.

What are we doing wrong on the too-big videos?

Thanks for everything you do for Toastmasters!

John Williams
Club 3963

To make a video (or picture) adapt to smaller screen sizes, set the width to a %, not a pixel size. Leave the height box empty. The way your home page and World Champion pages are arranged, the width can be 100%.

On the first video on the World Champions tab , I tried 70% on width and left height blank. The pre-load is too small in both directions, on desktop and smart phone.

If I make the width 100% and the height blank, the pre-load is the correct width on both desktop and smart phone - but its too short on both.
 

The %width + blank height technique still works on pictures but not on video. Has something changed in the FreeToastHost software that may have inadvertently caused this?

Is there an alternative to using the YouTube tool for putting a YouTube video on a page?

The alternative would be the iFrame embed tool. However, it looks like the YouTube tool already has a way to manage this.

Re-add a video with the YouTube tool and use the checkbox "Make Responsive (ignore width and height, fit to width)"

I tested this on my directions page and it appears to achieve the desire goal. After the initial embed, going back in the editor it shows a pixel size but the video adjusts correctly to the phone screen. CKEditor quirk I suppose.

www.goodmorningtoastmasters.com/directions.html



 

Thanks Richard! That works! The video on all our pages are perfect now! You are the best!

John Williams
Club 3963