Shar
Community Champion

Accordion Alternative - Details tag

Jump to solution

Howdy! A friend showed me the details tag the other day and now I cannot stop telling others about it.

It's an HTML5 tag so it works in mobile too! See more at The Details disclosure element.

Spoiler
The spoiler reminds me of the details tag!

I added some styling to the main parts. Here is the code to try in your Canvas page:

<details>

 <summary style="background-color: whitesmoke; font-weight: bold; cursor: pointer;">
  Some question here? <small>(click to reveal)</small></summary>

 <div id="reveal" class="pad-box-mini border-round" style="border: thin solid grey;">
<p>Reveal text goes here</p>
</div>

</details>

I've already started using it on pages to split up large content blocks including video! I found the old places where the accordion was used and replaced each with its own details block.

Group of details to mimic an accordionGroup of details to mimic an accordion

 

Cheers - Shar

Labels (2)
19 Solutions
cholling
Community Champion

Love this! Thanks for sharing!!

View solution in original post

0 Likes
mtuten
Community Contributor

Do we know how well screen reader programs can interact with this code?

View solution in original post

Shar
Community Champion

Hi@mtuten ,

I just tried it out with (out of the box) NVDA and it reads it as a button that you can then keyboard ENTER to open/expand. In fact, I was able to keyboard navigate - TAB to it as well. So with more context (instructions) on the summary bit it'll be more obvious that there's an action to perform.

Shar_1-1598502800792.png

Cheers - Shar

 

View solution in original post

mtuten
Community Contributor

@Shar Thanks for testing that. Did the screen reader say "expanded" or "collapsed" when you clicked the "button"? If it didn't that would make it inaccessible. Would adding the following code to the summary fix that?

aria-expanded="false"

One more consideration: In my experience, accordions are created in a way where each "button" is part of a list. This may be helpful for screen reader users so that they know how many buttons there are in the accordion. Does this code play nicely within a list structure?

 

Also, do we know what the mobile experience is like? Does it expand/collapse appropriately from the Canvas apps? If it doesn't, is the element forced into an expanded state?

View solution in original post

Shar
Community Champion

Hi Michelle @mtuten 

Using the aria-expanded tag did help the screen-reader announce the status along with putting it in a list when I have more than one. I'll do that more often!

Here's the code I ended up using to try it out:

<h2>Details</h2>
<ul style="list-style-type: none;">
 <li>
  <details>
   <summary aria-expanded="false">Click to open</summary>
   here's more info
  </details>
 </li>
 <li>
  <details>
   <summary aria-expanded="false">Look at this one</summary>
   and more info.
  </details>
 </li>
</ul>


And the resulting output on a Canvas page with one details expanded and the other collapsed:

Details list on the pageDetails list on the page

Oh yes, it does play nice in mobile, very nice in the Canvas Student App which was why I got so excited about this tag in the first place.

Details list in Canvas Student AppDetails list in Canvas Student App

I also like that in a list it gets a margin-left: 25px. That little visual empty space helps draw my eye that it's something special. 😋

Cheers - Shar

View solution in original post

mtuten
Community Contributor

That's exciting, @Shar ! Thanks for experimenting. Maybe once I get some stuff off my plate I can share the JAWS and VoiceOver experience just to round things out. 

Can I ask that the original post be edited to include this new code so that fewer folks end up using the less accessible version because they didn't read the rest of the conversation?

View solution in original post

Shar
Community Champion

Hi Michelle @mtuten ,

I went back to my first example group of details and ran the screen reader on them, and it does announce that it is a "button - collapsed" without me needing to put in the aria-label.

Group of details to mimic an accordionGroup of details to mimic an accordion

But I did surround all those details in a div tag with a group role and label so that the screen reader would announce the grouping. And the title is a tool-tip for sighted users.
<div id="Accordion" role="group" aria-label="4-button accordion" title="Click to toggle expand/collapse.">

Cheers - Shar

View solution in original post

0 Likes
mtuten
Community Contributor

Interesting. I'll have to look at it after a while, but it sounds like you might have it all figured out. 🙂

View solution in original post

0 Likes
asells
Community Explorer

Thanks Shar!

🙂  Alissa

View solution in original post

0 Likes
jgerber2
Community Explorer

Has anyone been successful in using the <details open> attribute to have the details be displayed when the page is loaded?   I'd like to have a section of details a page be displayed upon page load, but then have a user be able to close.   It appears that Canvas removes the open from the html, leaving the default closed state.

View solution in original post

adamboyce
Community Participant

I've been using the details tag thanks to your insight @Shar! However, when I insert course media it doesn't show after saving... You mentioned videos worked in your description, so any advice would be awesome.

Do I need to be in the html editor rather than the RCE when inserting the iframe for some reason?

View solution in original post

Tags (3)
0 Likes
Shar
Community Champion

Hi there @adamboyce !

Hmm, I had some trouble recently trying to put H5P content (hotspot type) under a details tag; the content would not display. But I've used the details tag successfully with YouTube video.

I just tried it now with a quick Canvas record-video and no problem there either. Here's what I did:

  1. HTML Mode, set up the details, summary, and placeholder text for the video
  2. Classic RCE, used the Record/upload media button at my placeholder video text
  3. Saved and waited for the video to process.
<details>
<summary>Example Video from Shar</summary>
<p>Video here</p>
<p><a id="media_comment_m-2cVzH7FEMypuA6Krirf7KmRFWwgpNWTz"
class="instructure_inline_media_comment video_comment"
data-media_comment_type="video" data-alt=""></a></p>
</details>

No iframe at all with that content. Here's the code I used for my YouTube video. I use a method of inline responsive-embedding that limits the video width so it's not overly huge on really large screen displays.

<details>
<summary>Prototyping for better eLearning: Part 1 (8:26)</summary>
<div id="outer" style="max-width: 640px; margin: auto;">
<div class="embed-container"
style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
<iframe
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
src="https://www.youtube.com/embed//o3IGxWKDu-E?rel=0"
allowfullscreen="allowfullscreen"></iframe></div>
</div>
</details>

What kind of media are you using? Are you using the new RCE? Perhaps there's some issue there that I'm unaware of with the use of iframes.

Let me know, I'm happy to help you troubleshoot. Paste your code if you can. 😊
Cheers - Shar

View solution in original post

Tags (2)
adamboyce
Community Participant

Yes, I'm using the New RCE and added previously recorded course media via the dropdown menu pictured. I'll try out some of the code you've provided, but mine is below.

 Screenshot 2020-12-02 161152.png

<hr />
<details>
<summary><strong>What if I need to miss a week?</strong></summary>
You're in a pickle <iframe style="width: 400px; height: 225px; display: inline-block;" title="Video player for [Untitled Wed Sep 23 2020 15:16:30 GMT-0600 (Mountain Daylight Time)]" data-media-type="video" src="https://*ourinstitution*.instructure.com/media_objects_iframe/m-65j3H4tZuFcGyhqFmu7XNa4qZH1ifswA?type=video" allowfullscreen="allowfullscreen" allow="fullscreen" data-media-id="m-65j3H4tZuFcGyhqFmu7XNa4qZH1ifswA"></iframe>
</details>
<hr />

View solution in original post

0 Likes
adamboyce
Community Participant

Using your code adjusting the data-media-id worked (m-65j3H4tZuFcGyhqFmu7XNa4qZH1ifswA), however the video shows up as a small thumbnail and then expands to almost the entire screen when clicked. I noticed the media player is also different. I probably need to play with the style to figure out the sizing issues, but this is definitely a good workaround if there really is no way for the iframe to be active under the details tag. Thanks @Shar!

classic media player:

adamboyce_1-1606952322367.png


iframe media player: 

adamboyce_0-1606952252695.png

 

View solution in original post

Shar
Community Champion

Hi again @adamboyce ,

Ahh I think it's definitely something with the new video player used in the new RCE. I just tried it and yeah, in the edit mode the video shows up, but once we press save it fails to load. I suspect it's something to do with the order that things load in.

At any rate, for the old video, I slipped a <div style="max-width: 400px;"> </div> around the <a> </a> and that keeps my video the same size as the new media player. I'm still going to keep messing around with the new video player to see what I can come up with, otherwise, we'll have to remember the link to data-media-id trick.

Cheers - Shar

View solution in original post

Shar
Community Champion

Hi again again @adamboyce 

By the way, have you looked at the videos on mobile? The Canvas media comment videos show up as regular videos in mobile ready to view with a press of the play button (yay!).

It's the iframe tag that's definitely causing the issue, more specifically the iframe video player, the html5 video tag works so much better under the details. But the src is an ugly long string; I'm guessing that's the reason they made a media_objects_iframe directory.

<p><video name="media" width="400" height="225" controls="controls">
<source
src="https://iad.cdn.nv.instructuremedia.com/originals/o-2cWcj8esU6h5TkrUPMNjKMw6YA4DJeuL/transcodings/t-2dc1inMbD7TV83Yne9bopwjYdvYxFZnS.mp4"
type="video/mp4" /></video></p>

I've truncated the src URL in the above snippet because it's such a hideous run of characters including an expiration date that seems to be from when I generated the string. At any rate, here's what I did to get the video code and source.

  1. in New RCE, embedded the course video on the page.
  2. Saved the page.
  3. Right-click on video and select Open video in a new tab
  4. In the new tab, Right-click on video and select Inspect
  5. In the inspect frame, Right-click on video tag and select Copy element
  6. Back to Canvas page, Edit,  switch to HTML editor. Paste in code before closing details tag.
  7. Switch to RCE to allow Canvas to update the code
  8. Switch back to HTML, edit width to 400 and height to 225.
  9. Saved the page.
  10. Looked at it on the Canvas mobile app.

Yeah, that's a lot of work for a possibly persistent video tag under a details. But if your page is going to be stable and no one else is going to go in and mess with it, then it's worth a shot at doing. Are you making an FAQ page? Is that video going to remain in the course?

I'm going to keep my test page and set a reminder to see if it's still viable tomorrow and in three months.
I hope this helps you out, I know I'm going to document the process for the future when the New RCE is the only thing available.
Cheers - Shar

View solution in original post

Tags (2)
adamboyce
Community Participant

Thanks @Shar! That worked in desktop and mobile! Although the preview image of the video did not load on mobile, it still displayed the play button and played the video just fine. Yes, it is an FAQ page and should be constant when we duplicate the course. 

I really appreciate your time and insights!

View solution in original post

0 Likes
Shar
Community Champion

@adamboyce are you still there?

Well, it's about a week later and the long string URL is definitely a temporary .mp4. So it's back to using the classic RCE video player. Here are the instructions I've documented for Including a Canvas embedded video under the details tag.

  1. Record or upload video in the New RCE as per usual.
  2. Switch to HTML editor to grab the data-media-id
    <iframe style="width: 400px; height: 225px; display: inline-block;"
      title="Video player for Shar 5 seconds" data-media-type="video"
      src="/media_objects_iframe/m-2xhd5EzJAxXRjJGFuvJzyJ1fbGrWqV9b?type=video"
      allowfullscreen="allowfullscreen" allow="fullscreen"
      data-media-id="m-2xhd5EzJAxXRjJGFuvJzyJ1fbGrWqV9b"></iframe>
  3. Replace the iframe code with media comment link set in a 400px wide div. This canvas-video div will display the video under the details tag...
    <details>
    <summary>Commentary Video (click to reveal)</summary>
    <div id="canvas-video" style="max-width: 400px;"><a
      id="media_comment_m-2xhd5EzJAxXRjJGFuvJzyJ1fbGrWqV9b"
      class="instructure_inline_media_comment video_comment"
      data-media_comment_type="video" data-alt=""></a></div>
    </details>

Incidentally, using the classic RCE video player also makes it easier to add captions. The instructions for captions has one using the temporary .mp4 in Amara.

Stay home, stay healthy,
Cheers - Shar

View solution in original post

Tags (2)
0 Likes
35 Replies
jdick1
Community Participant

Where has this been all my Canvas life!? Thank you so much for sharing this, Shar!

0 Likes
Shar
Community Champion

@jdick1 

Oh it's a new HTML5 tag, as in 2020 new. 😁 Part of the HTML5 Semantic Elements group of new tags.

Cheers - Shar

0 Likes

Word!

0 Likes

Hi. This is great. Thank you for sharing. Can I check if it works in the Canvas App as well, by chance - any hiccups or headaches that you have come across?

Cheers

Nat

 

0 Likes

Hi @natalie_hamilto 

Yes, the details tags works great in mobile. That's why I love it so much.

As far as hiccups and headaches, if you use details on a page without instructions/prompts to click to toggle reveal users may not know they can click. The default cursor is the text cursor rather than a pointer.

I've even had good success using details as a button.

Details as a buttonDetails as a button

 

<details>
<summary class="border-round"
style="cursor: pointer; text-align: center; width: 180px; border: thin solid silver; background-color: snow; margin: auto;">
Discussion Etiquette</summary>
<p>Please remember there is another human on
the other side of this discussion.</p>
</details>

Mobile view of details buttonMobile view of details button

On the whole, I'm quite pleased with how well details works because we can style it in lots of different ways. My biggest hiccup is remembering all the different ways I've used it and sticking to a consistent style. But we recently added some custom CSS styling to get a consistent "brand" look. So now I just need to remember to use that style. 😅

Stay healthy,
Cheers - Shar

Tags (2)
0 Likes
cholling
Community Champion

Love this! Thanks for sharing!!

0 Likes
mtuten
Community Contributor

Do we know how well screen reader programs can interact with this code?

Shar
Community Champion

Hi@mtuten ,

I just tried it out with (out of the box) NVDA and it reads it as a button that you can then keyboard ENTER to open/expand. In fact, I was able to keyboard navigate - TAB to it as well. So with more context (instructions) on the summary bit it'll be more obvious that there's an action to perform.

Shar_1-1598502800792.png

Cheers - Shar

 

mtuten
Community Contributor

@Shar Thanks for testing that. Did the screen reader say "expanded" or "collapsed" when you clicked the "button"? If it didn't that would make it inaccessible. Would adding the following code to the summary fix that?

aria-expanded="false"

One more consideration: In my experience, accordions are created in a way where each "button" is part of a list. This may be helpful for screen reader users so that they know how many buttons there are in the accordion. Does this code play nicely within a list structure?

 

Also, do we know what the mobile experience is like? Does it expand/collapse appropriately from the Canvas apps? If it doesn't, is the element forced into an expanded state?

Shar
Community Champion

Hi Michelle @mtuten 

Using the aria-expanded tag did help the screen-reader announce the status along with putting it in a list when I have more than one. I'll do that more often!

Here's the code I ended up using to try it out:

<h2>Details</h2>
<ul style="list-style-type: none;">
 <li>
  <details>
   <summary aria-expanded="false">Click to open</summary>
   here's more info
  </details>
 </li>
 <li>
  <details>
   <summary aria-expanded="false">Look at this one</summary>
   and more info.
  </details>
 </li>
</ul>


And the resulting output on a Canvas page with one details expanded and the other collapsed:

Details list on the pageDetails list on the page

Oh yes, it does play nice in mobile, very nice in the Canvas Student App which was why I got so excited about this tag in the first place.

Details list in Canvas Student AppDetails list in Canvas Student App

I also like that in a list it gets a margin-left: 25px. That little visual empty space helps draw my eye that it's something special. 😋

Cheers - Shar

mtuten
Community Contributor

That's exciting, @Shar ! Thanks for experimenting. Maybe once I get some stuff off my plate I can share the JAWS and VoiceOver experience just to round things out. 

Can I ask that the original post be edited to include this new code so that fewer folks end up using the less accessible version because they didn't read the rest of the conversation?

Shar
Community Champion

Hi Michelle @mtuten ,

I went back to my first example group of details and ran the screen reader on them, and it does announce that it is a "button - collapsed" without me needing to put in the aria-label.

Group of details to mimic an accordionGroup of details to mimic an accordion

But I did surround all those details in a div tag with a group role and label so that the screen reader would announce the grouping. And the title is a tool-tip for sighted users.
<div id="Accordion" role="group" aria-label="4-button accordion" title="Click to toggle expand/collapse.">

Cheers - Shar

0 Likes
mtuten
Community Contributor

Interesting. I'll have to look at it after a while, but it sounds like you might have it all figured out. 🙂

0 Likes
asells
Community Explorer

Thanks Shar!

🙂  Alissa

0 Likes
jgerber2
Community Explorer

Has anyone been successful in using the <details open> attribute to have the details be displayed when the page is loaded?   I'd like to have a section of details a page be displayed upon page load, but then have a user be able to close.   It appears that Canvas removes the open from the html, leaving the default closed state.

I've tried various ways, but Canvas will always strip the 'open' option. A workaround is to use iframe or canvas' own accordian classes. I've been successful doing both, but I like what I've done with the latter. Different institutions may have different source code, so my code may not be the same as on another institution LMS. Thus, instead of posting the code, this was my process: Create a simple module with one or two elements such as a sub-header and wiki-page. Using developer tools in Chrome, you can inspect the source code for particular Canvas elements. Identify the dummy accordian code, then right click and edit as HTML. Click inside, Ctrl-A, Ctrl-C to copy it all. Then, in a text editor, you can strip away unnecessary code using 'Find' or 'FInd/Replace', or simply deleting sections, to get to the barebones accordian. Then, you can adjust icons, labels, etc to suit your purposes. Example below. Be careful erasing too much as you will break indenting. Also be careful with eliminating 'divs', as you will break the UI. Edit: Forgot to mention that it's possible to preserve the blue highlight on mouse over.

canvas accordian.png

Tags (2)
0 Likes
Shar
Community Champion

Hi @Draco 

Yes, you can use the Canvas item group element_toggler as a replacement accordion. I went through the Style Guide before they deprecated it and grabbed what code seemed useful. The code is very long and prone to getting messed up and since I design courses for others to use, I couldn't guarantee the instructor wouldn't inadvertently break it.

<div class="item-group">
<div class="ig-header">
<h2 class="ig-header-title element_toggler"
aria-controls="group_1"
aria-expanded="true"
aria-label="Item Group Header toggle item visibility"
role="button">
<i class="icon-mini-arrow-down auto_rotate"></i> Item Group Header
</h2>
</div>
<ul id="group_1" class="ig-list">
<li>
<div class="ig-text">General text in the grey space.</div>
</li>
<li>
<div class="ig-row">Gray text in the white box.</div>
</li>
<li>
<div class="ig-row ig-row-empty">
<div class="ig-empty-msg">Centered Text in the white box. (empty row)</div>
</div>
</li>
</ul>
</div>

Ultimately, I opted not to switch from the element_toggler method because it does not work in mobile--everything displays as just regular text, not even an arrow to denote there's something different about the text. I'm learning to live with the stripping out of "open" on the details tag, and I'm selectively using details for a few things here and there where I want to save space by not showing all the detail info.

Stay healthy,
Cheers - Shar

Draco
Community Member

Hi Shar,

The latest code doesn't use element-toggle, it uses expand or collapse_module_link and while the newer collapse function doesn't work at all in mobile, the formatting does (test pic from mobile below). Since it is always open by default on load for mobile or desktop, the code can be used as 'details open', and the default 'details' can be used when toggling on mobile is needed (just without open onload). Once the code has been stripped to the core accordian, it's not difficult to use as a modifiable template for different types of pages and uses.

I'm currently adopting it for use as a content tree at the bottom of module pages, as it will provide a function similar to Blackboard's 'table of contents' that was incorporated inside modules. Since I flipped my courses, I have a lot of content and students have told me that they like to skip around the pages. Now that our institution has adopted Canvas, I haven't found a similar ability in the UI other than hitting the back or modules button and scrolling to a particular page. Note that for content after Course Orientation, the text blurb will be deleted. I haven't tested accessibility yet, but it's currently in sandbox and isn't critical content. However, I'll be testing that soon, because I'm considering other uses, as the div style matches the Canvas UI.

Happy ☘️ Day!

mobile accordian.jpg

0 Likes
Shar
Community Champion

Hi @Draco !

Oh cool, so you're using it to make a module TOC/submenu 😎. And yes, I see what you mean now about the expand_module_link and collapse_module_link in the code that it's using. I also added cursor: pointer to the header portion to really make it stand out that it can be clicked.

Homemade "module-accordion" menuHomemade "module-accordion" menu

Here's what I ended up with my stripped down version of the code. What else can I remove to make it leaner?

<div id="homemade-submenu"
    class="item-group-condensed context_module      context_module_hover"
    aria-label="homemade menu" data-workflow-state="active">
    <div id="submenu-header" class="ig-header header" style="cursor: pointer;">
        <span class="ig-header-title collapse_module_link ellipsis"
            style="display: inline-block;" title="Homemade Submenu"
            role="button" aria-controls="submenu-content" aria-expanded="true"
            aria-label="Toggle the submenu."> <i
                class="icon-mini-arrow-down"></i> <span class="name"
                title="homemade">Homemade</span> </span> <span
            class="ig-header-title expand_module_link ellipsis"
            style="display: none;" title="Homemade Submenu" role="button"
            aria-controls="submenu-content" aria-expanded="false"
            aria-label="Toggle the submenu."> <i
                class="icon-mini-arrow-right"></i> <span class="name ellipsis"
                title="homemade">Homemade</span> </span></div>
    <div id="submenu-content" class="content" style="display: block;">
        <ul class="ig-list items context_module_items manageable ui-sortable">
            <li class="context_module_item">
                <div class="ig-row ">Information in ig-row</div>
            </li>
        </ul>
    </div>
</div>

I just have 1 row of "content" ig-row that's not a link or anything but I know where to put the items to collapse.

Your institution's mobile CSS definitely has some of the styling included; for me, when I look in mobile, everything is just plain text. Though the header portion can be "tapped" and nothing happens. heh. 😅

We've experimented with other types of submenus on pages but since we're instructional designers and not the instructors, I never feel comfortable that the instructor will not mess something up on the page or change a page name and break the link on the submenu. So, I usually put a link that goes back to the specific module on the Modules page.

Thanks for sharing the information about the module expand/collapse and Good luck with your menu project!
Cheers - Shar

Tags (1)
0 Likes
Draco
Community Member

Hi @Shar,

Interestingly enough, I used your code to create a page, and the formatting does come through on mobile for me. It must differences in implementation, but I'm surprised the classes work because some of yours are different from ours. Adding the pointer is great, I considered it, but wanted to continue identifying what the classes do before adding anything new, but I think I'm almost there. 

You don't need the following classes: ellipsis - this the 3 dots for editing dropdowns; managable & ui-sortable, these are classes for moving module items and don't work in pages as much of the code to make it work is stripped upon page-save like "open" in "details". I can't remember if we had this one: data-workflow-state="active", but you can probably sacrifice it, as it likely pertains to module editing and/or published vs non-published module.

Due to accessibility, aria items must remain, so this does add editing time as all naming must be changed for different purposes. I still haven't tested yet. What I did yesterday was to try to combine classes to reduce the number of divs (to make an easier template) yet preserve indenting, because it works in mobile for us.

Have a great evening!

Yes Canvas strips the attribute 'open' of the details tag... how to work around this?
0 Likes
I find the same problem. The editor removes the attribute open. This is a supported attribute found here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
I would also like to have an accordion open by default using the details tag since it is an attribute.
0 Likes
adamboyce
Community Participant

I've been using the details tag thanks to your insight @Shar! However, when I insert course media it doesn't show after saving... You mentioned videos worked in your description, so any advice would be awesome.

Do I need to be in the html editor rather than the RCE when inserting the iframe for some reason?

Tags (3)
0 Likes
Shar
Community Champion

Hi there @adamboyce !

Hmm, I had some trouble recently trying to put H5P content (hotspot type) under a details tag; the content would not display. But I've used the details tag successfully with YouTube video.

I just tried it now with a quick Canvas record-video and no problem there either. Here's what I did:

  1. HTML Mode, set up the details, summary, and placeholder text for the video
  2. Classic RCE, used the Record/upload media button at my placeholder video text
  3. Saved and waited for the video to process.
<details>
<summary>Example Video from Shar</summary>
<p>Video here</p>
<p><a id="media_comment_m-2cVzH7FEMypuA6Krirf7KmRFWwgpNWTz"
class="instructure_inline_media_comment video_comment"
data-media_comment_type="video" data-alt=""></a></p>
</details>

No iframe at all with that content. Here's the code I used for my YouTube video. I use a method of inline responsive-embedding that limits the video width so it's not overly huge on really large screen displays.

<details>
<summary>Prototyping for better eLearning: Part 1 (8:26)</summary>
<div id="outer" style="max-width: 640px; margin: auto;">
<div class="embed-container"
style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
<iframe
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
src="https://www.youtube.com/embed//o3IGxWKDu-E?rel=0"
allowfullscreen="allowfullscreen"></iframe></div>
</div>
</details>

What kind of media are you using? Are you using the new RCE? Perhaps there's some issue there that I'm unaware of with the use of iframes.

Let me know, I'm happy to help you troubleshoot. Paste your code if you can. 😊
Cheers - Shar

Tags (2)
adamboyce
Community Participant

Yes, I'm using the New RCE and added previously recorded course media via the dropdown menu pictured. I'll try out some of the code you've provided, but mine is below.

 Screenshot 2020-12-02 161152.png

<hr />
<details>
<summary><strong>What if I need to miss a week?</strong></summary>
You're in a pickle <iframe style="width: 400px; height: 225px; display: inline-block;" title="Video player for [Untitled Wed Sep 23 2020 15:16:30 GMT-0600 (Mountain Daylight Time)]" data-media-type="video" src="https://*ourinstitution*.instructure.com/media_objects_iframe/m-65j3H4tZuFcGyhqFmu7XNa4qZH1ifswA?type=video" allowfullscreen="allowfullscreen" allow="fullscreen" data-media-id="m-65j3H4tZuFcGyhqFmu7XNa4qZH1ifswA"></iframe>
</details>
<hr />

0 Likes
adamboyce
Community Participant

Using your code adjusting the data-media-id worked (m-65j3H4tZuFcGyhqFmu7XNa4qZH1ifswA), however the video shows up as a small thumbnail and then expands to almost the entire screen when clicked. I noticed the media player is also different. I probably need to play with the style to figure out the sizing issues, but this is definitely a good workaround if there really is no way for the iframe to be active under the details tag. Thanks @Shar!

classic media player:

adamboyce_1-1606952322367.png


iframe media player: 

adamboyce_0-1606952252695.png

 

Shar
Community Champion

Hi again @adamboyce ,

Ahh I think it's definitely something with the new video player used in the new RCE. I just tried it and yeah, in the edit mode the video shows up, but once we press save it fails to load. I suspect it's something to do with the order that things load in.

At any rate, for the old video, I slipped a <div style="max-width: 400px;"> </div> around the <a> </a> and that keeps my video the same size as the new media player. I'm still going to keep messing around with the new video player to see what I can come up with, otherwise, we'll have to remember the link to data-media-id trick.

Cheers - Shar

Shar
Community Champion

Hi again again @adamboyce 

By the way, have you looked at the videos on mobile? The Canvas media comment videos show up as regular videos in mobile ready to view with a press of the play button (yay!).

It's the iframe tag that's definitely causing the issue, more specifically the iframe video player, the html5 video tag works so much better under the details. But the src is an ugly long string; I'm guessing that's the reason they made a media_objects_iframe directory.

<p><video name="media" width="400" height="225" controls="controls">
<source
src="https://iad.cdn.nv.instructuremedia.com/originals/o-2cWcj8esU6h5TkrUPMNjKMw6YA4DJeuL/transcodings/t-2dc1inMbD7TV83Yne9bopwjYdvYxFZnS.mp4"
type="video/mp4" /></video></p>

I've truncated the src URL in the above snippet because it's such a hideous run of characters including an expiration date that seems to be from when I generated the string. At any rate, here's what I did to get the video code and source.

  1. in New RCE, embedded the course video on the page.
  2. Saved the page.
  3. Right-click on video and select Open video in a new tab
  4. In the new tab, Right-click on video and select Inspect
  5. In the inspect frame, Right-click on video tag and select Copy element
  6. Back to Canvas page, Edit,  switch to HTML editor. Paste in code before closing details tag.
  7. Switch to RCE to allow Canvas to update the code
  8. Switch back to HTML, edit width to 400 and height to 225.
  9. Saved the page.
  10. Looked at it on the Canvas mobile app.

Yeah, that's a lot of work for a possibly persistent video tag under a details. But if your page is going to be stable and no one else is going to go in and mess with it, then it's worth a shot at doing. Are you making an FAQ page? Is that video going to remain in the course?

I'm going to keep my test page and set a reminder to see if it's still viable tomorrow and in three months.
I hope this helps you out, I know I'm going to document the process for the future when the New RCE is the only thing available.
Cheers - Shar

Tags (2)
adamboyce
Community Participant

Thanks @Shar! That worked in desktop and mobile! Although the preview image of the video did not load on mobile, it still displayed the play button and played the video just fine. Yes, it is an FAQ page and should be constant when we duplicate the course. 

I really appreciate your time and insights!

0 Likes
Shar
Community Champion

@adamboyce are you still there?

Well, it's about a week later and the long string URL is definitely a temporary .mp4. So it's back to using the classic RCE video player. Here are the instructions I've documented for Including a Canvas embedded video under the details tag.

  1. Record or upload video in the New RCE as per usual.
  2. Switch to HTML editor to grab the data-media-id
    <iframe style="width: 400px; height: 225px; display: inline-block;"
      title="Video player for Shar 5 seconds" data-media-type="video"
      src="/media_objects_iframe/m-2xhd5EzJAxXRjJGFuvJzyJ1fbGrWqV9b?type=video"
      allowfullscreen="allowfullscreen" allow="fullscreen"
      data-media-id="m-2xhd5EzJAxXRjJGFuvJzyJ1fbGrWqV9b"></iframe>
  3. Replace the iframe code with media comment link set in a 400px wide div. This canvas-video div will display the video under the details tag...
    <details>
    <summary>Commentary Video (click to reveal)</summary>
    <div id="canvas-video" style="max-width: 400px;"><a
      id="media_comment_m-2xhd5EzJAxXRjJGFuvJzyJ1fbGrWqV9b"
      class="instructure_inline_media_comment video_comment"
      data-media_comment_type="video" data-alt=""></a></div>
    </details>

Incidentally, using the classic RCE video player also makes it easier to add captions. The instructions for captions has one using the temporary .mp4 in Amara.

Stay home, stay healthy,
Cheers - Shar

Tags (2)
0 Likes
howardmichaelda
Community Explorer

How does "details disclosure" work with a number of paragraphs?

 

0 Likes
MariaMatheas2
Community Explorer

Brilliant! Thanks for sharing! 😍😊

0 Likes
ilovell
Community Contributor

This is so many levels of awesome that I made a page with examples for my faculty to use and made it public download in Canvas Commons. Thanks so much for sharing!

0 Likes
mtuten
Community Contributor

This actually came up in a different thread on pausing/hiding animated gifs, but I figured it was worth posting here for anyone who might get pointed to this thread. 

 

(The gif came with some code that I copied from somewhere else. I do not mean it as a statement associated with this conversation.)

 

Animated: Alan Partridge - would it be rude to stop listening to you?

 

 

<div style="margin-bottom:20px;" >
    <details>
        <summary style="cursor: pointer; font-size: large; border: 1px solid #D6D9DC; background-color: #f5f5f5; padding: 10px 10px 10px 20px; border-radius: 25px; width: 230px;" role="button" aria-expanded="false">Click to Show/Hide Gif</summary>
        <div><img src="https://assets.codepen.io/128034/stopl.gif" alt="Animated: Alan Partridge - would it be rude to stop listening to you?" /></div>
    </details>
</div>

 

 

 

 

While it still isn't as ideal as being able to pause the gif, it is still a way to improve the accessibility.

andrew_sheppard
Community Participant

Shar, this is very useful. Thanks for sharing!

0 Likes