Canvas Tabs: How do you include a video & text in a single tab?

[cmidyett15]

Hello all, 

I'm currently dealing with a Canvas design issue that involves the tab feature. I want to add a video to the tab, then I want to add video reflection text to the right of the video. I'm having trouble in the HTML code. The page won't allow me to move the text to the right and even if it's below, the text runs outside of the tab border. Any ideas on how to solve this? 

[DrNufer]

This would get slightly tricky.  Here's one thing you can try - within the tabbed content create a <div> which will house both the video and the text you want to the right of the video.  I don't know how your video is set up (embedded from YouTube, uploaded directly into Canvas, Studio, etc.), but you can try to float that to the left with a little padding.  That way the text will fill the right and bottom of the tab.  Roughly, it may look something like:

    <div id="tab-1">
        <div>
            <iframe style="float: left; padding-right: 20px;" src="URL"></iframe>
            <p>Tab 1 content. This would be your video reflection text.</p>
        </div>
    </div>

Alternately, you could experiment with bootstrap within the tab. I haven't actually attempted that, but maybe I'll give it a try in the coming days and explore.  If you haven't tinkered with bootstrap, here is a good explanation:

https://www.howtocanvas.com/create-amazing-pages-in-canvas/bootstrap

⚠ ⚠ disclaimer ⚠ ⚠

The tab feature in Canvas relies on old, antiquated code that Instructure/Canvas no longer actively supports.  The developers have not actively removed the functionality (called jQuery, I believe), but they strongly advise against using it.  Tabs do not consistently work in mobile browsers and don't render on the mobile apps.  Right now tabs mostly work on laptop and desktop browsers, but it may not be a sustainable feature.

[cmidyett15]

Appreciate this reply my friend! Big fan of your work. I've watched a lot of your videos, so honored to have your wisdom on this! Because the tabs feature isn't reliable for mobile apps, I think I'll have to go another route. I'm supporting a course development for teachers, so I'll need total functionality for both computers and mobile devices. Thanks again for the help! 

[DrNufer]

I appreciate that! Good to know that content is helpful. One thing I've recently been pushing my course developers at my institution is to consider the new accordion menus instead of tabs. The tabs are nicer in practice, but today they're just buggy, whereas the [what I'm calling] accordion is fairly new and renders well. It's technically called the "details disclosure element". It is great for things like glossaries, but I've found various applications.

https://youtu.be/2e5EOl5mVWY
https://www.howtocanvas.com/create-amazing-pages-in-canvas/accordions

https://youtu.be/MOiWzjd7AgM
https://www.howtocanvas.com/create-amazing-pages-in-canvas/advanced-accordions

[cmidyett15]

Once again you come to me with a serious knowledge drop! Appreciate it, man! This was super helpful! Really good to know for accessibility reasons too. The tabs looks really clean on the page, but the accordion does too.