Essential Theme – fitvids.js

Essential Theme – fitvids.js

by Daemon Hunt -
Number of replies: 8

Hi Guys, me again smile

I'm struggling to get fitvids to work properly with the theme. It's becoming a bit of a stumbling block for my eventual upgrade of our production Moodle instance to 3.x +

Sandbox: Moodle 3.1.1, Essential version 2016121300

In my Moodle 2.8 instance (production), fitvids works very well. An example is this video wrapped in an iFrame within an HTML block element:

The video is being intercepted by fitvids properly and wrapped in the div class="fluid-width-video-wrapper" perfectly fine.

Upon direct upgrade of the site to Moodle 3.x along with the corresponding upgrade of the theme, fitvids does not seem to be able to see this video and many others (object embed) and is not doing what it should. See this shot of the same HTML block in our sandbox of 3.1.1:

You can clearly see the side scrolling bars. The video is now not being resized at all. Inspecting the code reveals that div class="fluid-width-video-wrapper"is not there.

I have gone into the fitvids.js file (where it now exists in a new location), and no amount of hacking will make these videos resize correctly as they used to. I note that there is a .less file in there now, and I have also played around with that to no avail.

The only video elements that are resizing correctly are YouTube videos.

I want to know if this is an issue with fitvids, or if something significant has changed, or should I be doing something special? Maybe my media filters are interferring?

I can PM you new access details again to my sandbox if you need them again.

Regards

Average of ratings: -
In reply to Daemon Hunt

Re: Essential Theme – fitvids.js

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Daemon,

There is no Essential version 2016121300.

Have you turned on FitVids via the setting 'fitvids'?

I have had to make changes to the code to cope with issues ages ago but its been over a year.  Look at the history here: https://github.com/gjb2048/moodle-theme_essential/commits/master/amd/src/fitvids.js.

I've compared the M2.8 version with the M3.1 version and the only real difference (apart from AMD'ing) is the addition of;

                var $src = $this.attr('src');
                if ($src) {
                    if($src.indexOf('swf') >= 0) {
                        console.log('FitVids not on (swf src)');
                        return; // Disable FitVids on this 'swf' #536.
                    }
                }

G

Average of ratings: -
In reply to Gareth J Barnard

Re: Essential Theme – fitvids.js

by Daemon Hunt -

Sorry Gareth, don't know where I got that version number from.

It is in fact Release 3.1.1.5 (Build: 2016061714).

Yes I have turned it on from the setting, I'm just going to browse through the commit history now.

Average of ratings: -
In reply to Daemon Hunt

Re: Essential Theme – fitvids.js

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks Damon,

In that case can you either provide a test MBZ course file or a list of instructions to replicate the problem please?

G

Average of ratings: -
In reply to Gareth J Barnard

Re: Essential Theme – fitvids.js

by Daemon Hunt -

Hi Gareth

I have a 30MB MBZ file to send to you. Unsure where to send this to you as I'm not comfortable dropping it here.

Cheers

Average of ratings: -
In reply to Daemon Hunt

Re: Essential Theme – fitvids.js

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

Sorry if this sounds like a silly question, but have you changed your User > Preferences for the Text Editor from Default to TinyMCE?

If not and you are using the Default ATTO Editor to add the Video, then there may be a problem with the styling.

But, like I said from the start, if this is not relevant to this problem then please ignore it. I am only asking because there are issues when using responsive designs with ATTO which seems to create unwanted scrollbars on the page.

Thanks

Mary

Average of ratings: -
In reply to Mary Evans

Re: Essential Theme – fitvids.js

by Daemon Hunt -

Hi Mary,

No this isn't the issue. Do you mean ATTO with Moodle 3.x +? Worked perfectly fine with Moodle 2.8.

Thanks

Average of ratings: -