- Posts: 4
COMMUNITY FORUM
- Forum
- Commercial Joomla Extensions & Templates
- Frontpage Slideshow
- vimeo is not responsive in 480 x 640
Please note that official support for commercial extensions & templates is provided in the Subscriber Help Desk.
Support requests should ONLY be directed there and require an active subscription plan.
This forum board is to be used for archive purposes and knowledge exchange ONLY.
Support requests should ONLY be directed there and require an active subscription plan.
This forum board is to be used for archive purposes and knowledge exchange ONLY.
vimeo is not responsive in 480 x 640
- Bob
- Topic Author
- Offline
- New Member
Less
More
10 years 3 months ago - 10 years 3 months ago #56152
by Bob
vimeo is not responsive in 480 x 640 was created by Bob
Check this test page: nemeangames.org/j33/
In certain screen sizes (like 480x640), the video will have a height greater than the width. In the above example it overlaps some text and part of the lower image.
Here is a screenshot: imgur.com/ep4iYMB
In the article I put the code: {vimeo}54767172{/vimeo}
in the allvideo settings I chose Responsive template.
In certain screen sizes (like 480x640), the video will have a height greater than the width. In the above example it overlaps some text and part of the lower image.
Here is a screenshot: imgur.com/ep4iYMB
In the article I put the code: {vimeo}54767172{/vimeo}
in the allvideo settings I chose Responsive template.
Last edit: 10 years 3 months ago by Bob.
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
10 years 3 months ago #56160
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic vimeo is not responsive in 480 x 640
The art-responsive-embed class which was generated from Artisteer is breaking the responsiveness of the plugin.
You should remove that <div> or use the stock responsive template of AllVideos.
You should remove that <div> or use the stock responsive template of AllVideos.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Bob
- Topic Author
- Offline
- New Member
Less
More
- Posts: 4
10 years 3 months ago - 10 years 3 months ago #56163
by Bob
Replied by Bob on topic vimeo is not responsive in 480 x 640
Hello Krikor
Thank you for your answer.
This page is from the same site, it has a video from youtube and it is 100% responsive: nemeangames.org/j33/en/nemean-games-revival/step-history.html
So both pages use the Allvideos plugin, both pages use the artisteer template (and art-responsive-embed) but the youtube one is responsive while the vimeo is not. If it is the art-responsive-embed div, why doesn't it brake the youtube video?
I looked at the source code of the page, I could not find the art-responsive-embed. And if it is generated by Artisteer, I would not know how to remove it (from that particular joomla page), especially without braking anything else.
Also, I am already using the Allvideos Responsive template.
So I could not fix this issue. Could you give me some more insight please?
Thank you for your answer.
This page is from the same site, it has a video from youtube and it is 100% responsive: nemeangames.org/j33/en/nemean-games-revival/step-history.html
So both pages use the Allvideos plugin, both pages use the artisteer template (and art-responsive-embed) but the youtube one is responsive while the vimeo is not. If it is the art-responsive-embed div, why doesn't it brake the youtube video?
I looked at the source code of the page, I could not find the art-responsive-embed. And if it is generated by Artisteer, I would not know how to remove it (from that particular joomla page), especially without braking anything else.
Also, I am already using the Allvideos Responsive template.
So I could not fix this issue. Could you give me some more insight please?
Last edit: 10 years 3 months ago by Bob.
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
10 years 3 months ago #56171
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic vimeo is not responsive in 480 x 640
Every service is embedded using a different method.
YouTube uses iframes, Vimeo uses another method.
That extra div is the cause. It is populated by this function
in nemeangames.org/j33/templates/nemeangamesj3314/script.responsive.js
You should remove this function and all its references.
eg:
YouTube uses iframes, Vimeo uses another method.
That extra div is the cause. It is populated by this function
var responsiveVideos = (function ($) {
"use strict";
return function (responsiveDesign) {
$("iframe[width],object[width],embed[width]").each(function () {
var obj = $(this);
if ((obj.is('[width]') && obj.attr("width").indexOf("%") !== -1) ||
(obj.is('[class]') && obj.attr("class").indexOf("twitter") !== -1))
return;
var container = obj.parent(".art-responsive-embed");
if (responsiveDesign.isResponsive) {
if (container.length !== 0)
return;
container = $("<div class=\"art-responsive-embed\">").insertBefore(obj);
obj.appendTo(container);
} else if (container.length > 0) {
obj.insertBefore(container);
container.remove();
}
});
};
})(jQuery);
in nemeangames.org/j33/templates/nemeangamesj3314/script.responsive.js
You should remove this function and all its references.
eg:
responsiveVideos(responsiveDesign);
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Bob
- Topic Author
- Offline
- New Member
Less
More
- Posts: 4
10 years 3 months ago #56200
by Bob
Replied by Bob on topic vimeo is not responsive in 480 x 640
Hello Krikor
I pinned down the problem to the following property, in template.responsive.css file:.responsive .art-responsive-embed {
padding-bottom: 56.25%;
}
What I need to do is remove or decrease the padding. But if I do it (globally), then the youtube videos that are embeded in other pages do not work. I am sure there is a way to isolate the change for the vimeo page only. Something like this:
<div style="padding-bottom: 56.25%;" >
{vimeo}54767172{/vimeo}
</div>
Can you help me out here?
I pinned down the problem to the following property, in template.responsive.css file:.responsive .art-responsive-embed {
padding-bottom: 56.25%;
}
What I need to do is remove or decrease the padding. But if I do it (globally), then the youtube videos that are embeded in other pages do not work. I am sure there is a way to isolate the change for the vimeo page only. Something like this:
<div style="padding-bottom: 56.25%;" >
{vimeo}54767172{/vimeo}
</div>
Can you help me out here?
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
10 years 3 months ago #56208
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic vimeo is not responsive in 480 x 640
No need to edit the styles of your template.
The issue is in the script I sent you. Since you are using AllVideos that script is not needed and should be removed.
It forces extra markup on the iframes and it causes issues.
The issue is in the script I sent you. Since you are using AllVideos that script is not needed and should be removed.
It forces extra markup on the iframes and it causes issues.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Bob
- Topic Author
- Offline
- New Member
Less
More
- Posts: 4
10 years 3 months ago #56219
by Bob
Replied by Bob on topic vimeo is not responsive in 480 x 640
I tried what you suggested and it worked perfectly.
I was just trying to find a solution where I would not have to modify/customize the template at all.
Thank you
I was just trying to find a solution where I would not have to modify/customize the template at all.
Thank you
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
10 years 3 months ago #56226
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic vimeo is not responsive in 480 x 640
You 're welcome Rob,
Unfortunately it was the only choice (in terms of saving time).
Unfortunately it was the only choice (in terms of saving time).
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Forum
- Commercial Joomla Extensions & Templates
- Frontpage Slideshow
- vimeo is not responsive in 480 x 640