CTAT video component changing size upon refresh

[kmul...@gmail.com]

We are building an example-tracing tutor that includes the CTATVideo component and recently noticed that the video re-sizes to a different size video when browser refresh happens (the tutor is deployed to tutorshop and we test things by pressing on the green arrow for the target problem set); this re-sizing did not occur in an older, deployed version that had the same code (as far as we can tell). The resizing occurs even if tutorshop cannot find the video file (i.e., a “ghost” image” placeholder stating the file cannot be found changes size when the browser is refreshed). We tried a number of debugging steps but these did not help - for the record, these steps included:

1. setting the min-height and min-width attributes in the CSS file; subsequently also tried setting the max-height and width counterparts
2.  clearing the browser cache of all data
3.  switching from Firefox to Chrome (latest versions are installed)
4. removing the extra tags that the CTAT HTML editor adds after the CTATVideo tag, i.e., the CTAT manual stated we should just have a <div id="videoplayer" class="CTATVideo" src="Assets/lcpid.mp4"> </div> but the HTML editor adds some text (e.g., class="CTATVideo editable-style silex-id-1614887199371-6 page-page-1 paged-element CTATComponent") – removing this extra text changed the nature of the resizing but the resizing persisted
5. Google'ing to see if something changed recently CSS-wise in general (as this seems to be a new problem at least for us)

As noted above none of these attempts addressed the issue – the resizing of the video component still occurs upon browser refresh (or when a screen is revisited in tutorshop). Just in case it is useful, one of the test tutors we are using to debug this issue is called “KM Test222” in tutorshop (this version has only one problem set that contains just one problem in which both max and min  are set in the CSS file; here, the video increases in size upon refresh on my end).

Any advice on how to address this video component resizing issue would be greatly appreciated - I hate to admit defeat but am out of ideas.

Many thanks, Kasia

[Octav Popescu]

Hi Kasia,

I'm not sure what you call a browser refresh. I tried your test tutor both in Firefox and Chrome on a Mac and I don't see any resizing. Do I need to do anything to reproduce it? Or is it a Window-only issue?

Best,
Octav

--
You received this message because you are subscribed to the Google Groups "CTAT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ctat-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/ctat-users/881724e5-b82a-4c7c-a1cf-7c6b6f06dbf1n%40googlegroups.com.

[kmul...@gmail.com]

Thank you for the fast reply!  Here are the exact sequence of steps:

- clear cashed images from browser (e.g., Firefox: Cache: Clear data->Cashed Web Content).

- go to Packages->KMTest222->Problem sets in tutorshop

- click on green button to "Run Problem Set"

- screen shows up with a large video - this was the size specified in the CSS file (it is too large - that was on purpose to test things)

- now click on the [1] button on the top of the page ("Run problem in ..." - this reloads or "refreshes" the screen). The video is now much smaller / not the specified size in the CSS file. Alternatively, you can go back to the problem set and click on the green button to "run the problem set

- the video will stay the same size from this point on because it is cached but it is not the size it was originally nor is it the size we specified in the CTAT HTML editor (and that is subsequently stored in the CSS);  as soon as cache is cleared, the first time the CTAT problem is loaded, the video is of the correct size but then subsequent times the CTAT problem is loaded it is not. I tested again this morning and this behavior was replicated.

Thank you again for looking into this !!! Kasia

PS I'm on a Mac but this problem shows up on a PC as well (my student tested it on her end_

[Jonathan Sewall]

Please see my problem set JSvideoSize in your package. My changes:

1. modified the .css to revise the positions of the components a bit, and restored use of the style for CTATVideo
2. changed your <script> tags to use more current versions of ctat.min.js & ctatloader.js
3. added 2 event listeners, nested:
1. the CTAT runtime library emits the "tutorInitialized" event after all the CTAT components have been created; the listener adds a listener on the actual HTML <video> element
1.   the HTML <video> element emits a "canplay" event when it has retrieved the video clip; the listener resizes the element to match the size of the enclosing CTATVideo <div>
   

To view this discussion on the web visit https://groups.google.com/d/msgid/ctat-users/29703c5f-b107-4db9-b307-dc0809d25517n%40googlegroups.com.

[kmul...@gmail.com]

Wonderful - thank you very much, this fixed the issue. We really appreciate your help!!

Kasia