Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #19437

    Hi all,

    I had a topic going at (Purchase code hidden if logged out) -thumbnail/page/2 which was all of a sudden closed, while the issue was being handled.

    So I am just creating this new topic to hopefully resolve my issue.

    I am having issues with the video player not resizing properly. If you go to and click on Tedx Sydney (in the portfolio grid) and try to resize the window you can see it introduces black borders to the video. Nick gave me some temporary fixes which fixed the initial black border issue (which would show even without resizing the window), however these changes do not seem to work on portfolios outside of the frontpage (click on Tedx Sydney and see how it’s different).

    Could someone please let me know what to do to fix this. This is the final issue we need to fix before we can launch our company site. You guys are awesome and any help is as always greatly appreciated!


    Hey vikashautar,

    I only soft closed the topic so others (besides you) would not be able to post and derail it.

    However for this issue, this is the correct behavior for embedded videos across all api’s that I know of. Any change would be a hack at best and barely cross browser compatible.

    You can see the same thing if you embed a video using wordpress default oembed inside a post or page where the page is designed to be responsive.




    Hi Devin,

    Thanks for your reply!

    Nick, however got it working on his test installation, the video resized properly and didn’t introduce black boxes. He recorded this video to show me:

    The other thing I noticed is that the black borders are smaller if you change the slideshow behaviour to default in the global settings. However, I need to have it on ‘do not show first image’ because I want to show a different featured image that can’t show up on the actual content page (hope this makes sense).

    I also do not understand why the changes Nick helped me to implement in the custom.css only seem to work on the portfolio on the main page, I have portfolios on other pages and they show massive black borders. Please compare the item Tedx Sydney on (in the grid on the bottom) and on . The first page looks good, while the second page has huge black borders.

    Could you guys please look into it again? Or ask Nick how he managed to get it to work?

    Thanks so much!


    The changes target only classes on the home page by having the home class selector added onto the top div id. What Nick did is force the container to be a specific size relative to the video.

    The reason this doesn’t work when you resize the browser is it is manually setting the size of the iframe. When you resize the browser, the size has to change (responsive).

    If you wanted the same effect to work on all browser sizes, you would need to a) use all the same video sizes throughout the site and b) add media queries for each of the various window sizes. Even then, there will be pocket in between when the window is re-sized and the container responds so that there are black bars above the video within the iframe.


    Hi Devin,

    Thanks for your quick reply.

    I think I kind of understand what you are saying. However, I still do not understand why this seems to work perfectly in Nick’s video. Could you please have a look at the video he recorded at

    I am actually using the same video sizes all across the site.

    Could you please let me know how I get the changes to affect all the portfolio pages and not just the home class one?


    In your custom.css file you can try removing the home class selector so that it applies sitewide:

    #top.single-portfolio iframe {
    height: 398px !important;
    width: 700px !important;

    #top iframe {
    height: 373px !important;
    width: 700px !important;

    .portfolio_container_content .title_container h1 {
    font-size: 45px;

    .portfolio-title h1.main-title{
    word-wrap: break-word;

    #top .small_header_info a img {
    float: right;
    padding-top: 8px;
    padding-left: 5px;

    #top .slideshow_media_wrap, #top.single-portfolio .slideshow_media_wrap {
    background-color: white !important;

    #top .slideshow li single-portfolio iframe{
    height: 341px !important;
    width: 600px !important;
    position: relative;
    display: inline-block !important;
    background-color: white !important;
    overflow: hidden;


    Would that be the #top bit?


    The #top is the id of the main container. By adding the class selector home to it, the rest of the selectors will only apply to the home. So in the above css, I’ve removed the home class from the selector.


    effects home:

    #top.home .some-other-class { some css declarations}

    effects everything

    #top .some-other-class { some css declarations}


    Hi Devin,

    Thanks for that.

    I’ve changed it to the code you provided, but it still does not work on the portfolio pages that are not on the home page.

    Any other suggestions?


    Actually it worked, thanks! Would be great if you guys could let me me know if you have any suggestions for the resizing issue?

    I was also wondering if you know how I could display the titles in the non ajax portfolio items appear as the titles in ajax ones. So similar style.


    Not sure what you mean about the titles, they use the same exact styling for both.




    Hi Devin,

    I mean that the Ajax items use a different lay out: image on the left and title on the right with text underneath it.

    The non ajax items have the title on top of all the content.

    Compare to the ajax version of the item.

    Does this make sense at all?



    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #top.single-portfolio .portfolio_title_meta .portfolio-title {
    display: inline;
    #top.single-portfolio #main .container_wrap.title_container {
    display: none;s
    #top.single-portfolio #main {
    margin-top: 0px;

    That is about as close as you’ll get without modifying includes>loop-portfolio-single.php.




    Hi Devin,

    Thanks that’s great! Is there a way to add the block between the title and the meta data or even a bit more space. I feel it’s a bit too tight. I mean the bit between Amnesia Showcase and Director: Vikash Autar at

    I was also wondering if you have a fix for the email address being cut off in the content box at

    The email address (Email address hidden if logged out) is being cut off (the last letter).

    Thanks heaps for all your help!



    You can do something like this for the meta data spacing:

    #top.single-portfolio .portfolio_title_meta .main-title {
    margin-bottom: 7px;

    As for the email, you can either shorten it or try using a smaller font. You could also change the layout of that page to not have everyone on the same line so that each icon box has more space.

    If you have any other questions or issues just make a new post and we’ll do our best to help. I’ll mark this top as resolved for now and go ahead and close it.



Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Video Player not resizing properly’ is closed to new replies.