http://www.kriesi.at/support/topic/video-player-not-resizing-properly Support Forum - Topic: Video Player not resizing properly en-US Mon, 20 May 2013 15:49:05 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/video-player-not-resizing-properly#post-93389 Fri, 25 Jan 2013 13:35:20 +0000 Devin 93389@http://www.kriesi.at/support/ <p>You can do something like this for the meta data spacing:<br /> <pre><code>#top.single-portfolio .portfolio_title_meta .main-title { margin-bottom: 7px; }</code></pre> <p>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.</p> <p>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.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/video-player-not-resizing-properly#post-93133 Thu, 24 Jan 2013 05:12:32 +0000 vikashautar 93133@http://www.kriesi.at/support/ <p>Hi Devin,</p> <p>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 <a href="http://radicalorange.tv/portfolio-item/amnesia-razorfish-showcase/" rel="nofollow">http://radicalorange.tv/portfolio-item/amnesia-razorfish-showcase/</a></p> <p>I was also wondering if you have a fix for the email address being cut off in the content box at <a href="http://radicalorange.com.au/people/" rel="nofollow">http://radicalorange.com.au/people/</a><br /> The email address <a href="mailto:vikash@radicalorange.co.au">vikash@radicalorange.co.au</a> is being cut off (the last letter).</p> <p>Thanks heaps for all your help!</p> <p>Vikash </p> http://www.kriesi.at/support/topic/video-player-not-resizing-properly#post-93027 Wed, 23 Jan 2013 15:46:36 +0000 Devin 93027@http://www.kriesi.at/support/ <p>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:<br /> <pre><code>#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; }</code></pre> <p>That is about as close as you'll get without modifying includes&gt;loop-portfolio-single.php.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/video-player-not-resizing-properly#post-92771 Tue, 22 Jan 2013 07:27:38 +0000 vikashautar 92771@http://www.kriesi.at/support/ <p>Hi Devin,</p> <p>I mean that the Ajax items use a different lay out: image on the left and title on the right with text underneath it.</p> <p>The non ajax items have the title on top of all the content.</p> <p>Compare <a href="http://radicalorange.tv/blog/portfolio-item/amnesia-razorfish-showcase/" rel="nofollow">http://radicalorange.tv/blog/portfolio-item/amnesia-razorfish-showcase/</a> to the ajax version of the item.</p> <p>Does this make sense at all?</p> <p>Thanks! </p> http://www.kriesi.at/support/topic/video-player-not-resizing-properly#post-92665 Mon, 21 Jan 2013 17:53:36 +0000 Devin 92665@http://www.kriesi.at/support/ <p>Not sure what you mean about the titles, they use the same exact styling for both.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/video-player-not-resizing-properly#post-92456 Sun, 20 Jan 2013 05:39:20 +0000 vikashautar 92456@http://www.kriesi.at/support/ <p>Hi Devin,</p> <p>Thanks for that. </p> <p>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.</p> <p>Any other suggestions?</p> <p>Thanks!</p> <p>Actually it worked, thanks! Would be great if you guys could let me me know if you have any suggestions for the resizing issue?</p> <p>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. </p> http://www.kriesi.at/support/topic/video-player-not-resizing-properly#post-92299 Fri, 18 Jan 2013 18:30:22 +0000 Devin 92299@http://www.kriesi.at/support/ <p>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.</p> <p>IE:</p> <p>effects home:<br /> <code>#top.home .some-other-class { some css declarations}</code></p> <p>effects everything<br /> <code>#top .some-other-class { some css declarations}</code> </p> http://www.kriesi.at/support/topic/video-player-not-resizing-properly#post-92159 Thu, 17 Jan 2013 23:06:56 +0000 vikashautar 92159@http://www.kriesi.at/support/ <p>Would that be the #top bit? </p> http://www.kriesi.at/support/topic/video-player-not-resizing-properly#post-92079 Thu, 17 Jan 2013 14:21:43 +0000 Devin 92079@http://www.kriesi.at/support/ <p>In your custom.css file you can try removing the home class selector so that it applies sitewide:<br /> <pre><code>#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; }</code></pre> http://www.kriesi.at/support/topic/video-player-not-resizing-properly#post-91976 Thu, 17 Jan 2013 04:07:56 +0000 vikashautar 91976@http://www.kriesi.at/support/ <p>Hi Devin,</p> <p>Thanks for your quick reply.</p> <p>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 <a href="https://docs.google.com/open?id=0B8hqGBMSfHtKcGRjUzJNcFAxWlU" rel="nofollow">https://docs.google.com/open?id=0B8hqGBMSfHtKcGRjUzJNcFAxWlU</a> </p> <p>I am actually using the same video sizes all across the site.</p> <p>Could you please let me know how I get the changes to affect all the portfolio pages and not just the home class one? </p> http://www.kriesi.at/support/topic/video-player-not-resizing-properly#post-91974 Thu, 17 Jan 2013 03:25:14 +0000 Devin 91974@http://www.kriesi.at/support/ <p>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.</p> <p>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).</p> <p>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. </p> http://www.kriesi.at/support/topic/video-player-not-resizing-properly#post-91955 Thu, 17 Jan 2013 00:10:40 +0000 vikashautar 91955@http://www.kriesi.at/support/ <p>Hi Devin,</p> <p>Thanks for your reply!</p> <p>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:</p> <p><a href="https://docs.google.com/open?id=0B8hqGBMSfHtKcGRjUzJNcFAxWlU" rel="nofollow">https://docs.google.com/open?id=0B8hqGBMSfHtKcGRjUzJNcFAxWlU</a></p> <p>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).</p> <p>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 <a href="http://www.radicalorange.tv" rel="nofollow">http://www.radicalorange.tv</a> (in the grid on the bottom) and on <a href="http://radicalorange.tv/vikash-autar/" rel="nofollow">http://radicalorange.tv/vikash-autar/</a> . The first page looks good, while the second page has huge black borders.</p> <p>Could you guys please look into it again? Or ask Nick how he managed to get it to work?</p> <p>Thanks so much! </p> http://www.kriesi.at/support/topic/video-player-not-resizing-properly#post-91902 Wed, 16 Jan 2013 16:21:00 +0000 Devin 91902@http://www.kriesi.at/support/ <p>Hey vikashautar,</p> <p>I only soft closed the topic so others (besides you) would not be able to post and derail it.</p> <p>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.</p> <p>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.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/video-player-not-resizing-properly#post-91816 Wed, 16 Jan 2013 08:10:26 +0000 vikashautar 91816@http://www.kriesi.at/support/ <p>Hi all,</p> <p>I had a topic going at <a href="http://www.kriesi.at/support/topic/disable-video-playback-in-portfolio-thumbnail/page/2" rel="nofollow">http://www.kriesi.at/support/topic/disable-video-playback-in-portfolio-thumbnail/page/2</a> which was all of a sudden closed, while the issue was being handled.</p> <p>So I am just creating this new topic to hopefully resolve my issue.</p> <p>I am having issues with the video player not resizing properly. If you go to <a href="http://www.radicalorange.tv" rel="nofollow">http://www.radicalorange.tv</a> 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 <a href="http://radicalorange.tv/vikash-autar/" rel="nofollow">http://radicalorange.tv/vikash-autar/</a> (click on Tedx Sydney and see how it's different).</p> <p>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! </p>