Major bug: Only YouTube videos are responsive

Major bug: Only YouTube videos are responsive

by Derek Chaplin -
Number of replies: 26

It appears that when using the Insert or edit audio/video file button in the Atto editor, only locally embedded or YouTube videos are screen size responsive. Vimeo videos are not responsive. Even more curious, if the YouTube video option is left unchecked in the JS Player settings, they become non-responsive also. 

This is a long standing issue that has been raised a number of times but apparently never addressed. 

Questions:

  1. What magic CSS is invoked when the YouTube video option is checked in the JS Player settings?
  2. Why wouldn't the behavior be responsive by default for all videos?
  3. Does anyone have a CSS only solution until the problem is fixed?

  • Affected Moodle versions: all 3.6, all 3.7, all 3.8 including 3.8.2+ (Build: 20200312) and last weeks 3,9 Alpha builds 
  • Themes: Boost based ones: Boost, Classic, Fordson - haven't check on others
  • Browsers: Chrome, Brave, FireFox, Safari, etc
Average of ratings: -
In reply to Derek Chaplin

Re: Major bug: Only YouTube videos are responsive

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

I am not sure, Derek, about your statement "Vimeo videos are not responsive."

Here is a post that I made just yesterday.  This is a Vimeo video.  When I view this video from my iPad or iPhone, it is responsive!  

I cannot comment about YouTube videos since I do not use YouTube in my Moodle.

Average of ratings: -
In reply to Rick Jerz

Re: Major bug: Only YouTube videos are responsive

by Derek Chaplin -
Hi Rick,

Actually your embedded video just appears to be responsive because it is so small. Also if it was responsive shouldn't it be much larger in the first place? If I narrow my browser windows to its smallest extent, you can see that the right hand edge gets cropped.

Contrast this with a Vimeo video I embedded using the responsive iframe code copied from the Vimeo embed options screen in Vimeo. You can see it is all visible.


Similarly, the video expands to fill most of the screen when I maximize my screen.


The standard method of adding video using the video icon on the menu bar in the Atto editor does not yield responsive videos for anything other than YouTube videos. I have done fresh installs of the latest Moodle version 3.8.2+ and the problem still exists.

Unless I'm missing something very obvious, I'm really stumped on this. Especially why YouTube videos work fine.

cheers,
Derek
Average of ratings: -
In reply to Derek Chaplin

Re: Major bug: Only YouTube videos are responsive

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Maybe so. Maybe we are talking about two different things, 1) How a video snippet is displayed in ATTO, and 2) How the video appears on different devices when it is played in "full screen" mode.

I was focusing on #2, and as far as I can see, this Vimeo video is automatically sized to the full-screen of the device. You might be focusing on #1.

When I try #1 by making my browser very narrow, yes, I lose some of the right side, even the Reply, for example. But in I can scroll left and right. It appears that "responsive design" can only go so far. Even when I view my video post on my iPhone using Safari, the right side is not shown, but I can scroll left to right.
Average of ratings: -
In reply to Derek Chaplin

Re: Major bug: Only YouTube videos are responsive

by Steven A -
Have you tried wrapping your videos in the following div?

<div class="embed-responsive embed-responsive-16by9">

Bootstrap has different aspect ratios too. You can read more here: https://getbootstrap.com/docs/4.0/utilities/embed/
Average of ratings: -
In reply to Steven A

Re: Major bug: Only YouTube videos are responsive

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

Steven, it took me (a novice at HTML) a little work, and I couldn't get it to work.

First, I insert the video using the insert video tool.  Then I added the responsive class.  However, either I am adding it incorrectly or ATTO or Moodle strips out the class=  code.

 

 
Average of ratings: -
In reply to Rick Jerz

Re: Major bug: Only YouTube videos are responsive

by Steven A -

The insert video tool in the ATTO editor uses the <video> embed element. Vimeo works best (exclusively?) with their embed code, which is an iframe, so it might be less troublesome to switch to HTML view in the ATTO editor, paste in the Vimeo embed code (iframe), and wrap it in the responsive class. I hope that will work!

Average of ratings: -
In reply to Steven A

Re: Major bug: Only YouTube videos are responsive

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Steven, thanks for your ideas. Actually, I have tried using Vimeo's embed iframe code in HTML view in ATTO, doing exactly what you suggest, and the iframe code gets removed. You will see my discussion about this in this other discussion on Moodle.org.

I believe that between ATTO and the Vimeo video interpretation within Moodle that the HTML code gets reworked.

So, when I insert my Vimeo videos I use the "insert video" tool, but I put the regular "copy link code" URL into the "insert video" dialog box, and what shows up is what I would typically get had I used Vimeo's "copy embedd code." For me, this is fine and works well. However, I couldn't help Derek make this "picture" of the video be fully responsive, as I can do with a jpg/png inserted image.
Average of ratings: -
In reply to Rick Jerz

Re: Major bug: Only YouTube videos are responsive

by Steven A -

Aha, Rick. So somewhere along the way, the iframe gets removed. This might be straying too far from a simple solution, but you could try enabling trusted content to stop Moodle for "cleaning" text for your role (e.g., teacher). Search Site Administration for "enabletrusttext" to learn more. And here: https://docs.moodle.org/dev/Trusttext_cleaning_bypass

Average of ratings: -
In reply to Steven A

Re: Major bug: Only YouTube videos are responsive

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

Steven, I played around a little with the trusted content suggestion, and this didn't work.  It iframe code persists, but the video doesn't show.

My guess is that it has to do with the way the Vimeo video player support feature.

For me, I don't have a problem with the video's image not being totally resizable (responsive.)  This problem would only occur with a narrow smartphone screen, typically held in portrait orientation.  Derek's post, however, caught my interest.

Average of ratings: -
In reply to Rick Jerz

Re: Major bug: Only YouTube videos are responsive

by Steven A -

Derek's post caught my interest too, so thanks for trying out my suggestions!

Average of ratings: -
In reply to Steven A

Re: Major bug: Only YouTube videos are responsive

by Derek Chaplin -
The basic steps are:

In Vimeo:

  1. Log into Vimeo and launch the video you want to embed
  2. Select the Share option and choose the Embed option
  3. Modify the embed option to use responsive code
  4. Copy the embed code to the clipboard
In Moodle:
  1. Log into Moodle and go to the course resource where you want to embed the Vimeo video
  2. Switch the Content editor into HTML mode
  3. Paste the embed code from the clipboard into the content area
  4. Save and display

Average of ratings: Useful (1)
In reply to Derek Chaplin

Re: Major bug: Only YouTube videos are responsive

by Steven A -

I had time to try my own suggestion today on the Moodle sandbox. The responsive div around Vimeo embed code works in labels, pages, and forum descriptions, but not forum posts. I didn't test other modules.

Average of ratings: -
In reply to Derek Chaplin

Re: Major bug: Only YouTube videos are responsive

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Derek, I am not sure that I understand your "In Vimeo, Step 3." Can you provide (post) an example?
Average of ratings: -
In reply to Rick Jerz

Re: Major bug: Only YouTube videos are responsive

by Derek Chaplin -
Hi Rick,
Here is a PDF with screenshots of the steps to take in Vimeo. Sorry for the small size and slightly blurred images. Took me forever to get the file size under 500K.
Average of ratings: -
In reply to Derek Chaplin

Re: Major bug: Only YouTube videos are responsive

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Yes, this is essentially what I have been doing to get the "embed code." The problem is that once you put this into Moodle, like into this post (in HTML mode, of course) this embed code gets removed.

Yes, I think that you really do want the "picture" to appear. Another way to do this that is fully responsive is to post something like this, avoiding the picture:

View my video "Install Moodle on a Sandbox - PC".

Just to document the problem, when I open my post above on my narrow iPhone screen, it's default appearance is shown below.  Yes, the right side of the video is cut off.  Yes, not "responsive" as it should be, but still visible.  And I can swipe to the left to expose the entire graphic, but again, this is not responsive.  The quick solution is to rotate my iPhone into landscape.

But here is the interesting thing.  Look at the message.  It too is cut off!!!  So maybe forum posts are not totally response either! 

But... here is one more interesting thing.  When I go to my own Moodle and look at forum posts, they ARE responsive (on my iPhone!)  

Okay, my head is spinning right now.  I need more coffee.
Attachment Video is not Responsive.PNG
Average of ratings: -
In reply to Rick Jerz

Re: Major bug: Only YouTube videos are responsive

by Derek Chaplin -
Rick,
Strange that the embed code gets stripped out; that doesn't happen in either my 3.8.2+ or 3.9 alpha Moodle sites. I'm using the Fordson theme but things also work fine with the standard Boost theme. I'm using the Atto editor.
Average of ratings: -
In reply to Derek Chaplin

Re: Major bug: Only YouTube videos are responsive

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Below is the embed code. Are you able to follow any technique and have Moodle.org retain the code? I have included a video that shows me adding the code, and then Moodle removes it.


Embed Code:

<iframe src="https://player.vimeo.com/video/369899356" width="640" height="427" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
Average of ratings: -
In reply to Rick Jerz

Re: Major bug: Only YouTube videos are responsive

by Steven A -
Moodle cleans iframes (and probably more) from forum posts. Try your embed code in a page, label, or forum description. It works on Moodle Sandbox. Also try wrapping your embed code in bootstrap responsive code or Vimeo responsive code (Derek's PDF) to experience the magic of responsive video! But maybe there's a reason you want to embed videos in forum posts. In this case, I'm not sure what to suggest.
Average of ratings: -
In reply to Steven A

Re: Major bug: Only YouTube videos are responsive

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

Okay, here we go.

Well, I tried.  The video showed, the embed code was changed, and I couldn't detect any improvement.  Oh well.

For now, I am going to give up and defer to Derek's issue (his original post.)

Average of ratings: -
In reply to Rick Jerz

Re: Major bug: Only YouTube videos are responsive

by Derek Chaplin -
Rick,

I hadn't noticed that you were trying to embed the iframe in a forum post; that apparently is not supported. This makes sense from a security and forum integrity point of view when you think about it as it prevents the possibility of forum posts containing malicious code. A bit frustrating but understandable. 

You can still use the Insert or edit audio/video insert  button to embed videos but they won't be responsive unless its a YouTube video and you check the YouTube videos box in the JS Player settings under SITE ADMINISTRATION,  PLUGINS,  MEDIA PLAYERS,  VIDEOJS PLAYER.

However, as Steven mentioned, iframes are not stripped out in a label, page content area or in a forum's description area. 

Hope this clarifies things.

cheers,
Derek
Average of ratings: -
In reply to Derek Chaplin

Re: Major bug: Only YouTube videos are responsive

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Yes, yes, and yes.

Our focus has been on forum posts.

Okay, I can call it quits for now.

Thanks
Average of ratings: -
In reply to Derek Chaplin

Re: Major bug: Only YouTube videos are responsive

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
I decided that our discussion warranted a "Bug" in Moodle Tracker, so I created this Tracker item, MDL-68474 (Vimeo's Image in a Forum Post is not responsive. has been successfully created.)  (Perhaps, Derek, this is where you began in your original post.)

Please add your thoughts to this Tracker item.
Average of ratings: -
In reply to Derek Chaplin

Re: Major bug: Only YouTube videos are responsive

by Dave Balch -
> This is a long standing issue that has been raised a number of times but apparently never addressed. 

As a FYI, a "major" bug has a somewhat specific meaning in software development. In Moodle's case, it's:
Major loss of function, incorrect output https://docs.moodle.org/dev/Tracker_guide#When_editing_an_issue
This video on-page put not full-screen seems more like Minor (Minor loss of function where workaround is possible), or even Trivial (Cosmetic problem like misspelt words or misaligned text).

Naturally, if something is not working 100% how you expect it to then it will feel major - and if no-one raised it as an issue, nothing would happen to resolve it, so please excuse my  pedantry wink
Average of ratings: Useful (2)
In reply to Dave Balch

Re: Major bug: Only YouTube videos are responsive

by Derek Chaplin -
Hi Dave,
You're right it is not a major loss of function however it does make the viewing on smaller devices like tablets basically unusable since the right side of the video can get cut off.

I guess I'm surprised and a bit frustrated that a solution exists for YouTube but not Vimeo and the fact that it appears unless the option to handle YouTube videos in the settings is checked, YouTube videos have the same cropping issue also. Don't get me wrong, I think Moodle is fantastic and way better than anything else I've seen . At some point I'd like to learn PHP and dive into the code and offer solutions rather than complaining. It'll have to wait until retirement.

I'll put it in the bug tracker.

cheers,
Derek
Average of ratings: -
In reply to Derek Chaplin

Re: Major bug: Only YouTube videos are responsive

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
See my post above.

Yes, there is room for improvement. A Tracker item is fine. I am not sure where all this will end up, however, making some improvements has to begin somewhere.
Average of ratings: -