Keyword
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.

vimeo is not responsive in 480 x 640

More
10 years 3 months ago - 10 years 3 months ago #56152 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.
Last edit: 10 years 3 months ago by Bob.

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
10 years 3 months ago #56160 by Krikor Boghossian
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.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

More
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?
Last edit: 10 years 3 months ago by Bob.

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
10 years 3 months ago #56171 by Krikor Boghossian
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
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.

More
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?

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
10 years 3 months ago #56208 by Krikor Boghossian
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.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

More
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

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
10 years 3 months ago #56226 by Krikor Boghossian
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).

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum