Video Player not resizing properly « Support Forum | Kriesi.at

Support Forum » Eunoia

Video Player not resizing properly

14 posts from 2 voices

Started 4 months ago by vikashautar
Latest reply from Devin
This topic is closed
This topic is resolved

Tags:

No tags yet.

vikashautar
Member

Hi all,

I had a topic going at http://www.kriesi.at/support/topic/disable-video-playback-in-portfolio-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 http://www.radicalorange.tv 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 http://radicalorange.tv/vikash-autar/ (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!

Posted 4 months ago #
Devin
Moderator

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.

Regards,

Devin

Posted 4 months ago #
vikashautar
Member

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:

https://docs.google.com/open?id=0B8hqGBMSfHtKcGRjUzJNcFAxWlU

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 http://www.radicalorange.tv (in the grid on the bottom) and on http://radicalorange.tv/vikash-autar/ . 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!

Posted 4 months ago #
Devin
Moderator

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.

Posted 4 months ago #
vikashautar
Member

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 https://docs.google.com/open?id=0B8hqGBMSfHtKcGRjUzJNcFAxWlU

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?

Posted 4 months ago #

Devin
Moderator

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;
}

Posted 4 months ago #

vikashautar
Member

Would that be the #top bit?

Posted 4 months ago #
Devin
Moderator

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.

IE:

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

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

Posted 4 months ago #
vikashautar
Member

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?

Thanks!

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.

Posted 4 months ago #
Devin
Moderator

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

Regards,

Devin

Posted 3 months ago #
vikashautar
Member

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 http://radicalorange.tv/blog/portfolio-item/amnesia-razorfish-showcase/ to the ajax version of the item.

Does this make sense at all?

Thanks!

Posted 3 months ago #
Devin
Moderator
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.

Regards,

Devin
Posted 3 months ago #
vikashautar
Member

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 http://radicalorange.tv/portfolio-item/amnesia-razorfish-showcase/

I was also wondering if you have a fix for the email address being cut off in the content box at http://radicalorange.com.au/people/
The email address vikash@radicalorange.co.au is being cut off (the last letter).

Thanks heaps for all your help!

Vikash

Posted 3 months ago #
Devin
Moderator
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.

Regards,

Devin
Posted 3 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

Kriesi.at - Wordpress Themes and HTML Templates

Video Player not resizing properly

Topic Closed

Support Forum usage - Please read

Check out some of our WordPress Themes

Blog Categories

Latest Themes

Pages

About me…