css or shortcode attribute to resize facebook video embed?

  • Author
    Posts
  • #3067397

    Is there attribute code to resize facebook video shortcode? Or some CSS code that would allow me to specify a smaller size for all facebook video embeds? or is there another way to resize a facebook video embed on wordpress.com? I’m using the Edin theme and I can edit my CSS.

    I’m trying to embed a facebook video in one of my posts, but the preview shows the video takes up the full width of the content area –
    and it’s impossible to see both the top and bottom of the video at the same time. I’d like to resize the video so that the entire thing can be seen instead of part of the video being off screen.

    The following support page provides instructions to embed video from multiple websites and many of those instructions provide code that allows the size of the embedded video to be specified. But facebook videos aren’t on the list.

    https://en.support.wordpress.com/shortcodes/

    Hack that I am, I’ve tried a number of the attributes but none of them worked. Thanks in advance for any help!

    The blog I need help with is pragmaticcompendium.com.

    #3067668

    Hi there, do you have a page that currently has a facebook video on it that I could look at? If it is a draft of a page or post, I can still see it.

    #3067690

    Sure! Not sure what you need. Here’s a preview link with the post id, does that work?
    https://pragmaticcompendium.wordpress.com/?p=17833&preview=true

    #3067692

    I actually tried embedding a few different facebook videos and had the same issue with all of them.

    #3067724

    Many thanks for the link. The problem is that the #primary div, which contains the content area, has a width setting on this theme of 70%. Add this to your custom CSS. I’ve limited this change to only single post pages by using the single CSS class from the opening body html tag on single post pages.

    .single #primary {
      width: 100%;
    }

    #3067729

    thesacredpath,

    Thank you! Your answer gave me a new perspective!

    First, with regard to my original problem – I pasted the code you suggested and at 100% it actually made the embedded video even larger, chopped the height even more and it wouldn’t play if I scrolled even a little bit too far up or down.

    So I decreased the percentage again and again until the entire video screen was visible – 35%. As you can imagine that completely whacked out the formatting of my post pages in general.

    So I’m still left with giant facebook videos that aren’t fully visible after they are embedded and I’m still hoping there’s code specifically to resize facebook videos similar to the shortcode attributes for other video services as provided in the link from my original post above.

    Secondly, testing your code snippet changed the width of the entire content area – and pushed the sidebar below the post – and I think I really like having no sidebar on the post pages in this theme! So thank you!

    FYI:
    Not sure if you have access to view my custom CSS, but I had previously customized the width of the content area and the sidebar area with the following code (my comment note included):

    /* Reduce sidebar and increase content area for for posts and pages if less than 100 percent it leaves a gap between */

    #secondary {
    width: 20%;
    padding: 0;
    margin: 0;
    }

    #primary {
    width: 70%;
    padding: 0;
    margin: 0;
    }

    #3067757

    Oh sorry, I mistakenly thought you were wanting things larger, rather than smaller. You can give this a try. You can adjust the 460px value I have there and set the maximum width of the FB videos.

    .fb_iframe_widget_fluid_desktop {
      max-width: 460px !important;
      margin-left: auto;
      margin-right: auto;
      display: block !important;
    }

    I’ve also centered the video within the content area. If you want it to stay left-aligned, remove the two margin and display declarations.

    #3067758

    I want to try that code, but something strange has happened. I just upgraded to the Business plan about 2 hours ago and I noticed two things – and I’m not sure if these two things are related.

    First, when I went to edit css, I saw this message before I even made a change:

    “There are 2 errors which must be fixed before you can save.
    Update anyway, even though it might break your site?”

    I can’t tell where the errors are.

    Also, since I upgraded, every page on my site that uses the [display-posts] code no longer lists posts, but instead displays the shortcode.

    I had installed two plugins but have since deactivated and deleted them:
    “Shortcodes Ultimate” and “Subtitles”

    Any ideas?

    #3067759

    The more I explored my site, the worse it looked. I’m online with Support chat at the moment (1/24/18 at 10:32pm)

    #3067760

    Live Chat can get things straightened out for you. If you need additional CSS help, or need any adjustments to what I have offered, please let me know.

    #3067762

    thesacredpath,
    Thanks so much for your help. It was a rough few hours but my site it back to normal. I used the css code to set the max width of the facebook video embed and it works PERFECTLY. THANKS! and thanks for the note about left aligning it.

    #3067763

    You are very welcome, glad to hear all is as it should be again. :)

The topic ‘css or shortcode attribute to resize facebook video embed?’ is closed to new replies.