[Resolved] Video in blog posts CSS

Home Forums Support [Resolved] Video in blog posts CSS

Home Forums Support Video in blog posts CSS

  • This topic has 3 replies, 2 voices, and was last updated 9 years ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #90611
    Garth Dryland

    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

    #90684
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #91044
    Garth Dryland

    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

    #91070
    Tom
    Lead Developer
    Lead Developer

    Awesome – glad I could help ๐Ÿ™‚

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.