Disable video playback in portfolio thumbnail « Support Forum | Kriesi.at

Support Forum » Eunoia

Disable video playback in portfolio thumbnail

50 posts from 6 voices

Started 5 months ago by vikashautar
Latest reply from Devin
This topic is not resolved

Tags:

« Previous 12

Nick
Moderator

Hi,

Your custom.css file has errors. Please delete the whole thing and add this below

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

Thanks,

Nick

Posted 4 months ago #

Nick
Moderator

Hi,

You still didn't fix the bottom two css blocks in your custom.css file. Once you fix them as shown above, things will get better.

Thanks,

Nick

Posted 4 months ago #
vikashautar
Member

Hi Nick,

Thanks for that! I wasn't near my computer so couldn't do the change. I tried your suggestion but when I replace all the code in my custom.css with the code you have given me the issue returns. However, when I add the two css bits you gave me earlier to the top it fixes the problem. However, I've still got the issue with the white space below the content. This is what my custom css looks like at the moment (the pixel values are trial and error but they seem to have gotten rid of the black):

#top.single-portfolio iframe { height: 398px !important; width: 700px !important; } #top.home 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.home .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; }

Thanks again!

Posted 4 months ago #
Nick
Moderator
Hi,

Put this at the bottom please
```
.single-portfolio-entry .post-entry {
height: 400px;
padding-bottom: 0px;
}
```
Thanks,

Nick
Posted 4 months ago #
vikashautar
Member

Hi Nick,

Thanks! That seems to fix it for the non ajax version. Do you also have a way to fix it in the ajax version?

I was also wondering if there is a way to do this so it's 'dynamic', since this limits the post height to the pixel amount in the css if I'm correct?

Thanks again for all your help, hope you are having a good weekend!

Vikash

Posted 4 months ago #
Nick
Moderator

Hi,

How are you embedding this video? Just by using the URL or you actually add the iframe code? What is the aspect ratio of the actual video, better yet what size width/height are you uploading in to vimeo?
You have it protected on vimeo so I can't embed it locally to see what the problem is. Because it should be scaling down proportionally, but instead the player starts floating apart as though the player is in one aspect ratio and the video is in a completely different one.

Thanks,

Nick

Posted 4 months ago #
vikashautar
Member

Hi Nick,

I've embedded the video by just using the URL.

The aspect ratio of the video is 16:9

The videos are generally uploaded in 1920*1080 or 1024 * 576

I've enabled embedding anywhere, so could you please try again?

This is the embed code vimeo gives me on their embed page

<iframe src="http://player.vimeo.com/video/56317437" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Thanks again!

Vikash

Posted 4 months ago #
Nick
Moderator
Hi,

I got good results when I embedded your video like this
```
<iframe src="http://player.vimeo.com/video/56317437?wmode=opaque&autoplay=1" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" wmode="opaque" style="display: block;"></iframe>
```
I also set the slider to fade. Instantly it worked in all screen sizes. https://docs.google.com/open?id=0B8hqGBMSfHtKcGRjUzJNcFAxWlU

Thanks,

Nick
Posted 4 months ago #
vikashautar
Member

Hi Nick,

Thanks so much for your help. Can't believe you even did a screen recording!

I tried your suggestions, but it didn't seem to work. However, when I turned the slideshow feature off in the portfolio item it magically got rid of that extra white space underneath the content. Which is great!

However, the player still does not resize as it does in your video. I am really getting confused, cause I was 100% sure the Kriesi.at theme demo had the same issue (black box around video) but now it seems to work fine on the demo as well..

I also noticed that what we tried only had effect on the portfolio items on the homepage the items on other pages http://radicalorange.tv/vikash-autar/ and http://radicalorange.tv/david-den-engelsman/ still have the same issue..

I also noticed that the video items on the home page still have a slight black border when opened in Safari and I can't seem to get rid off it..

I am really starting to get confused about this now, since the demo theme seems to work fine.. I am more than happy to give you my login details if that would make it all easier!

Just to make sure I wasn't going crazy I just did a fresh install of the theme (even the custom.css). The issue still exists.

Posted 4 months ago #

Nick
Moderator

Hi,

I like to make quick videos since with screen-cast-o-matic its simple, and is more believable than just words from a stranger. Look. I initially wrote a ton of css to get you fixed. the problem is that 1/2 way through it I realized that the play button disappears. You can try this

@media only screen and (max-width: 479px) {
#top .slideshow li:first-child {
top: -131px;
height: 241px;
}
.portfolio_container_content .title_container h1 {
font-size: 1.5em;
font-weight: bold;
}}
/*----------*/
  @media only screen and (min-width: 480px) and (max-width: 767px) {
#top .slideshow li:first-child {
top: -86px;
height: 286px;
}
#top .two_third .slideshow {
height: 250px !important;
}
.portfolio_container_content .title_container h1 {
font-size: 1.9em;
font-weight: bold;
}}
/*----------*/
  @media only screen and (max-width: 767px) {
#top .slideshow li:first-child {
display: block;
position: relative;
top: -66px;
height: 306px;
}
.portfolio_container_content .title_container h1 {
font-size: 1.9em;
font-weight: bold;
}}
/*----------*/
 @media only screen and (min-width: 768px) and (max-width: 989px) {
#top .slideshow li:first-child {
display: block;
position: relative;
top: -66px;
height: 307px;
}
.portfolio_container_content .title_container h1 {
font-size: 2em;
font-weight: bold;
}}
/*----------*/
 @media only screen and (min-width: 1160px){
#top .slideshow li:first-child {
display: block;
position: relative;
top: -26px;
height: 347px;
}
.portfolio_container_content .title_container h1 {
font-size: 2em;
font-weight: bold;
}}

I am a bit behind schedule. You can mail me your login info, but I can't guarantee you I can look at it for at least 24 hours usjahm at gmail dot com

Thanks,

Nick

Posted 4 months ago #

vikashautar
Member

Hi Nick!

Thanks for that. I tried the code, however it does not seem to do anything. It only seems to 'break' the slideshow on the frontpage and does some weird stuff with the portfolio titles in the grid.

Isn't it weird that this seem to work fine on your install and the theme demo? I also find it strange that the changes we made only seem to affect the portfolio on the frontpage and not the portfolios on I other pages http://radicalorange.tv/vikash-autar/ and http://radicalorange.tv/david-den-engelsman/.

I highly appreciate all your help. Will email you the details.

Vikash

Posted 4 months ago #
vikashautar
Member

Okay just checked the kriesi.at theme demo and it also has extra black on top and bottom of the video. I've been playing around with the settings, trying to change almost possibly everything. The only thing I managed to achieve was to make the video behave like it does on the demo (by the slideshow behaviour to default).

I feel we're really close to getting this fixed, which is exciting!

Posted 4 months ago #
Devin
Moderator

Hi Vikash,

So what issue are you still running into? If you want to get things working as in the Demo I would just recommend saving a backup of all your current changes (download the modified theme and css files) then re-downloading the theme from themeforest and re-installing a fresh copy.

Regards,

Devin

Posted 4 months ago #
vikashautar
Member

Hi Devin,

The issue I am still running into is that the video player does not resize properly. If I resize the page it introduces black borders again. Another issue is that the semi fix we implemented only seems to affect the portfolio on the front page it does not affect any of the other portfolio pages such as http://radicalorange.tv/vikash-autar/ and http://radicalorange.tv/david-den-engelsman/

I have done exactly that. I have even deleted the custom.css and reinstalled the theme, the issue still exists. It works slightly better in the demo theme (but still not perfectly - it still places black borders on top and bottom of the video). I suspect the slideshow settings are different in the demo, it's probably set to default while I need to set it to display images except the first one. I need to use this slideshow setting because I do not want the video to be able to playback in the portfolio grid. So the theme displays the first images in the grid and then actually switches to the video when the portfolio item is loaded.

Would be great if you guys can have another look at it. Since we are a video production company it's very important to display the video perfectly.

Thanks,

Vikash

Posted 4 months ago #
Devin
Moderator

I'm not actually sure its "fixable" with the way video embedding works. I'll tag Peter on the post as he should be able to give a quicker answer one way or another.

Regards,

Devin

Posted 4 months ago #
vikashautar
Member

Hi Devin,

Thanks!

However, Nick did manage to get it working perfectly without black borders on his installation so it does seem to be possible.

Also is there a way to make the 'fixes' work on all portfolios? I don't understand why it only affects the portfolio on the home page and not the ones on other pages.

Another way to fix the issue would be to not allow the theme to play back videos in the portfolio grid. This way I can just simply change the thumbnail of the video and get it linked through to the actual post instead of it loading the video in the grid. This would mean I can set the slideshow behaviour to default.

Anyways would love to get you guy's thoughts on it. I do believe it's an important part of the theme to display video properly. It would simple make the theme perfect!

Thanks again for all your help!

Vikash

Posted 4 months ago #
hughjaas
Member

Ok, I've been struggling with the exact same issues here. I did finally manage to get Eunoia to work the way I wanted to with self-hosted and Youtube videos - take a look:
http://www.epicaffair.com/san-diego/recent/

The last issue I would like help with is getting a thumbnail to show under "Related Entries" at the bottom of each post. I got it to work on my portfolio page ( http://www.epicaffair.com/san-diego/videographers/ ) by having adding a featured image to the portfolio item but having it link to the blog post, but I don't want to have to do that for each blog post. Is there a way to add a Featured Image without it showing up in the post, or just adding an image to be the thumbnail?

Thanks,
Darryl

Posted 4 months ago #
vikashautar
Member

Hi Hughjaas,

The link where you are showing the videos does not work..

Posted 4 months ago #
hughjaas
Member

It's working - just a little slow right now. I'm experimenting with different cache settings. Looks like I need to fix that too.

Posted 4 months ago #
Devin
Moderator

Hey hughjaas,

You'll need to make a new topic for your issue so that we can address it specifically.

Regards,

Devin

Posted 4 months ago #