- Posts: 11
COMMUNITY FORUM
Odd margins on top and bottom of video
- Tjerk Vonck
- Topic Author
- Offline
- New Member
Less
More
4 years 4 months ago #176538
by Tjerk Vonck
Odd margins on top and bottom of video was created by Tjerk Vonck
As you can see at
www.nienoordspoorwegen.nl/materieel
I tried to display a video with AllVideo (great plugin btw!) as a banner on top of a page. Like most banners the width/height proportions are a bit odd, but that shouldnt't matter. With the Responsive template and width set to 100% that videos shows with a large black padding or margin on top and bottom. I can't get rid of that black area. With the Template setting set to 'Classic' the video displays without these black margins (but with other small issues). I don't want to use the Classic template of course, in a responsive website.
Several solutions you provided to problems other users had with the player size learned me to look for additional plugins or the template that might be messing things up, but thats doesn't seem the case? It really seems the Plugin insists to set the background area of the video to something like 968 * 561 pixels, while only something like 968 * 412 pixels is needed.
Any idea what is wrong of what I miss?
Krejt.
Several solutions you provided to problems other users had with the player size learned me to look for additional plugins or the template that might be messing things up, but thats doesn't seem the case? It really seems the Plugin insists to set the background area of the video to something like 968 * 561 pixels, while only something like 968 * 412 pixels is needed.
Any idea what is wrong of what I miss?
Krejt.
Please Log in or Create an account to join the conversation.
- JoomlaWorks
- Offline
- Admin
Less
More
- Posts: 6219
4 years 4 months ago #176539
by JoomlaWorks
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by JoomlaWorks on topic Odd margins on top and bottom of video
The Responsive layout maintains a 16:9 ratio for media. Your video has a higher ratio, that's why you get the black bars top and bottom.
Override the CSS selector ".avPlayerWrapper .avPlayerContainer .avPlayerBlock" in your template to this:
The result will be this: jmp.sh/2M9jScv
Override the CSS selector ".avPlayerWrapper .avPlayerContainer .avPlayerBlock" in your template to this:
.avPlayerWrapper .avPlayerContainer .avPlayerBlock {padding-top:43%;}
The result will be this: jmp.sh/2M9jScv
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Tjerk Vonck
- Topic Author
- Offline
- New Member
Less
More
- Posts: 11
4 years 4 months ago - 4 years 4 months ago #176540
by Tjerk Vonck
Replied by Tjerk Vonck on topic Odd margins on top and bottom of video
Fotis, you are a hero! Not only for answering this question, but also for patiently answering this same question over and over!
While you were answering my question, I stubled on at least two earlier answers that would have helped me:
www.joomlaworks.net/forum/allvideos/50566-background-image-for-audio-files-not-working-fine-with-responsive-template#172941 and www.joomlaworks.net/forum/allvideos/49851-a-lot-of-space-between-a-video-and-the-text#170135
For future reference a summary of what you told us before: When you choose responsive, the player will always attempt to fill the available horizontal space, while at the same time keeping a 16:9 ratio for width:height. So in the responsive view videos will be wrapped in a 16:9 canvas. If a video has a much higher ratio a padding below and above the video will show. To fix this, either create an MVC override or change your template's CSS file to adjust for the higher ratio. The 16:9 ratio uses a 58% percentage. (My video has more like a 43% percentage.)
Thanks, but the solution you provided would work if I only had video's in exactly this same ratio on my website, all showing the same black padding. But other video's have other ratios... So I need a banner specific solution. I think I'll try to use an additional Module Class Suffix for exactly this fix. (See the code; I added 'trvbanner' for this purpose.)
While you were answering my question, I stubled on at least two earlier answers that would have helped me:
www.joomlaworks.net/forum/allvideos/50566-background-image-for-audio-files-not-working-fine-with-responsive-template#172941 and www.joomlaworks.net/forum/allvideos/49851-a-lot-of-space-between-a-video-and-the-text#170135
For future reference a summary of what you told us before: When you choose responsive, the player will always attempt to fill the available horizontal space, while at the same time keeping a 16:9 ratio for width:height. So in the responsive view videos will be wrapped in a 16:9 canvas. If a video has a much higher ratio a padding below and above the video will show. To fix this, either create an MVC override or change your template's CSS file to adjust for the higher ratio. The 16:9 ratio uses a 58% percentage. (My video has more like a 43% percentage.)
Thanks, but the solution you provided would work if I only had video's in exactly this same ratio on my website, all showing the same black padding. But other video's have other ratios... So I need a banner specific solution. I think I'll try to use an additional Module Class Suffix for exactly this fix. (See the code; I added 'trvbanner' for this purpose.)
Last edit: 4 years 4 months ago by Tjerk Vonck. Reason: typo
Please Log in or Create an account to join the conversation.
- JoomlaWorks
- Offline
- Admin
Less
More
- Posts: 6219
4 years 4 months ago #176542
by JoomlaWorks
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by JoomlaWorks on topic Odd margins on top and bottom of video
A module class suffix would certainly make any overriding more elegant.
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Tjerk Vonck
- Topic Author
- Offline
- New Member
Less
More
- Posts: 11
4 years 4 months ago #176545
by Tjerk Vonck
Replied by Tjerk Vonck on topic Odd margins on top and bottom of video
For future reference and other users with a similar queeste:
In the advanced options of the custom module in which I want the video with my specific width:height ratio of 43% to display properly, I set the Module Class Suffix to something like 'video-banner'. I also added the following line at the end of the \joomla\plugins\content\jw_allvideos\jw_allvideos\tmpl\Responsive\css\template.css file:
That did the trick. Video's used as a banner in the 'slider' position of my template show without black paddings while all other (regular) video's are not affected by this hack.
In the advanced options of the custom module in which I want the video with my specific width:height ratio of 43% to display properly, I set the Module Class Suffix to something like 'video-banner'. I also added the following line at the end of the \joomla\plugins\content\jw_allvideos\jw_allvideos\tmpl\Responsive\css\template.css file:
.video-banner .avPlayerWrapper .avPlayerContainer .avPlayerBlock {width:100% !important;position:relative !important;padding:43% 0 0 0 !important;overflow:hidden;}
That did the trick. Video's used as a banner in the 'slider' position of my template show without black paddings while all other (regular) video's are not affected by this hack.
Please Log in or Create an account to join the conversation.
- JoomlaWorks
- Offline
- Admin
Less
More
- Posts: 6219
4 years 4 months ago #176550
by JoomlaWorks
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by JoomlaWorks on topic Odd margins on top and bottom of video
Keep in mind that by upgrading, you'll lose that change. So either create your own Responsive layout override inside your template's html/jw_allvideos/ folder (create it if it doesn't exist), or just place these CSS rules in your template's main CSS file.
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.