Embed video – problems with width and spaces in computer, tablet and mobile

  • colgadasdeunapercha · Member ·

    Hi, it’s me again.

    I’ve tried to solve this with wordpress help support but we couldn’t make it although we tried different things in CSS… it seems it doesn’t work correctly in different sizes (computer, tablet and mobile), so they recommended writing to you.

    The problem we can’t solve is about embedding a video in a post. See what happens in the post https://carlakissler.com/2017/10/05/a-fun-workshop-to-manufacture/:

    Capture 1: it has correct space above and below but it doesn’t align left and right, it seems like it will never be the whole width as the pics :( Could this be an error done by default in the theme?

    Capture 2: I inserted the video in another post -just in case- as I will do normally (https://carlakissler.com/2017/10/16/a-rustic-wedding/), and look, it hasn’t got the correct space above and doesn’t align left and right, it only works for the space below. How can I correct that? I mean, it should work the same every time I embed a video in any existing post or new post…

    Capture 3: look what happens when you check the video in the mac but in tablet format, it does align left and right, BUT it has a huge space above and below. How can I correct that?

    Capture 4: look what happens when you check the video in the mac but in mobile format, it does align left and right, BUT it has even more huge space above and below. How can I correct that?

    Pic 5 and 6: look what happens when you check it in my real mobile phone, it does align left and right, BUT not only it has even more huge space above and below, BUT then the pic above the video changes size it gets smaller with no reason :( How can I correct that?

    Download all the captures and pics here: https://we.tl/EnanNigPzJ

    Please let me know what we can do with this, it’s important for me to solve it so the videos look nicely like the pics do.

    Thanks!

    Carla

    The blog I need help with is: (visible only to logged in users)

  • mmcalister · Theme Author ·

    Hi Carla,

    Thanks for sending over this info. Are you able to invite us to your site so we can check it out live? The screenshots are helpful, but we can’t really deduce the problem correctly without seeing what might be happening on your site specifically. You can invite mmcalister to check out the site.

  • colgadasdeunapercha · Member ·

    Hi,

    I invited you but don’t know if I did it correctly as I have 2 different pages… maybe you receive from my user colgadasdeunapercha and not carlakissler… let me know please…

    thanks!

    carla kissler

  • mmcalister · Theme Author ·

    Thanks for sending that over, Carla! I was able to access the site. It looks like the theme isn’t making any style changes to the video. Instead, it looks like the video width itself is the issue. Are you able to make the width of the video something like 930px or larger as a test? Right now it is 900px, which is smaller than the overall container of the content area.

    See this link to learn how to change the width via the video shortcode.

  • colgadasdeunapercha · Member ·

    Hi,

    FYI I am not used in using html nor didn’t know what a shortcode is, I do embed the videos using the embed from url option…but I tried the following:

    1. I did a new post and wrote in the text this shortcode I created thanks to the link you sent to me [vimeo 94891277 w=930] and published the post (but then unpublished it and saved it only). Although in the editing post I only see the text itself, in the visualization of the post it does look correct and the width seems correct but I then tried with the existing post.

    2. So I went to my old post and wrote in the text the shortcode and saved it. Although in the editing post I only see the text itself, when you check the post in the website it does look correct and the width is finally the same as the pics :) !!!

    3. BUT there is a problem: still too much white space above and after the video, in computer, tablet and mobile version as I told you the smaller the device the bigger the space, and I want the space above and below of the video to be as the space above and below and between pics… How can I do that if I already have it in CSS but it seems it doesn’t work neither?

    4. And another BUT: all the pics have the same space between them as I told so in the CSS of the theme, but there is only one that isn’t making the style changes and just is the featured image of the post A workshop to manufacture. Instead in the post A rustic wedding despite having the video it does work… Can you check that also please?

    5. QUESTION: I understand every time I want to post a video w=930 I have to do a post for that video itself and then once having that post saved use the same shortcode in the post where I want to embed the video? Is that correct?

    Thanks so much for your help!

    Carla

  • colgadasdeunapercha · Member ·

    Hi!

    It’s been some days since hearing from you…
    Are you checking the space issues?

    Let me know please :)

    Thanks!

    Carla

  • mmcalister · Theme Author ·

    Hi there,

    Unfortunately, there isn’t much you can do about the space above and below the video. That’s the way WP.com embeds seem to work. You could try the following CSS that may help on desktops though: 

    .embed-vimeo {
    margin-bottom: -20px;
    margin-top: -50px;
}

    To fix your workshop post, it looks like you need to remove the following CSS:

    body.postid-487 .featured-image {
    margin-bottom: .1em;
}

    You don’t need a new post for videos. You can embed the videos directly into the post you are using the video in.

  • colgadasdeunapercha · Member ·

    Hi!

    Thanks for that! I fixed my workshop post by removing the CSS you told me :)

    And about the space, you were right, it works now in desktops with:

    .embed-vimeo {
    margin-bottom: -4px;
    margin-top: -32px;
    }

    I will contact wordpress support as the space doesn’t work nor in tablet nor in mobile versions, it still has a huge space :(

    Thanks so much for your help!!!

    Carla

  • The topic ‘Embed video – problems with width and spaces in computer, tablet and mobile’ is closed to new replies.