Archived topic
Video in blog posts CSS
3 replies · Started by Garth Dryland on March 23, 2015
Hey Tom
I cant seem to work out where the css is for the video sizing, which was recently changed.
I like it being 100% in width but the height needs reducing. While its not so noticeable on a large screen, when its on a mobile device it shows a lot of black above and below the video image.
I would like to shrink that area to fit the video image.
Does both the large screen view and mobile view use the same css stylesheet ?
You and see what I mean by visiting http://accountwise.co.nz to check out the blog video image.
Cheers
Hi Garth,
The widget of these oEmbed items in WordPress are calculated with PHP (WordPress requires the $content_width variable to be set), which doesn't know the different between mobile and desktop (unfortunately).
To make your iframe videos responsive, you'll have to look at an article like this: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
Basically, you need to wrap your embedded video in a container with the CSS provided on that page.
Let me know if you have any questions :)
Snap!
I actually found that same page and tried that before starting this thread, so I had another go after you said to use this process and I got it working.
I found that I was using the wrong .class, "video" not "vidoewrapper".
The original video/image was an embedded URL however it appears it must be a link with applicable dimensions in an iframe.
Anyway its now working exactly how I want it to be and across devices. Winning.
I will apply the changes to my live site in due course.
Thanks Tom
Awesome - glad I could help :)
