Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
shapcr
New Member

Table and Videos

I am interested in putting videos inside of a table, but it is difficult because of the size.  Is this possible?  I would also like to separate the table into sections, instead of having it all connected.  The table below is all connected.  Can I split the column or rows so they are each their own entity, without creating 6 different tables?

Thanks Craig

Header 1Header 2Header 3
14 Replies
kona
Community Coach
Community Coach

 @shapcr ​, I'm not sure if this is exactly what you're looking for, but it might give you some ideas of what you could do - Re: Video links shown in iframe

Hope this helps!

Stef_retired
Community Team
Community Team

 @shapcr ​, when I use tables to embed a bunch of videos and titles--and I do this quite a bit--I add extra rows and columns as spacers. So in your example above, you'd have five rows and five columns--25 cells in all--but you'd only populate nine of them with text and videos. You can resize the videos in the HTML view so that they nestle nicely in the cell.

You might find additional pointers in the Creating an inviting course home page​ blog as well as some examples in Canvas Commons​.

?Thank you so much for the reply. What do you do with the extra rows and columns? Are they just used as borders for the other cells/videos?

0 Kudos

 @shapcr , yes, the extra rows and columns are strictly used as borders to provide extra white space.

I have copied the table that I created below. I figured out how to put some space between the cells and also how to change the color, but putting a embedding a video from the external tool function completely throws the table off. I saw the reply for using html, but I am not sure how to embed a video with that. I was hoping I could just re-size the video to fit the box, but that doesn't seem possible.

Thanks Craig

?

0 Kudos

 @shapcr ​, when you switch views to the HTML Editor, do you see the video dimensions? Something like width="160" height="90"? That is where you will need to make your adjustments.

Here's an example. Admittedly, it doesn't use the extra columns and rows I referenced earlier, but should still present nicely on a page for your purposes.

<h3> Videos (click on the symbol at the lower right to toggle to full screen):</h3>

<table>

<tbody>

<tr>

<td><iframe src="https://player.vimeo.com/video/93206523" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/93206523" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/93206523" width="160" height="90"></iframe></td>

</tr>

<tr>

<td style="text-align: center;"><strong>Video 1</strong></td>

<td style="text-align: center;"><strong>Video 2</strong></td>

<td style="text-align: center;"><strong>Video 3</strong></td>

</tr>

<tr>

<td><iframe src="https://player.vimeo.com/video/93206523" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/93206523" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/93206523" width="160" height="90"></iframe></td>

</tr>

<tr>

<td style="text-align: center;"><strong>Video 4</strong></td>

<td style="text-align: center;"><strong>Video 5</strong></td>

<td style="text-align: center;"><strong>Video 6</strong></td>

</tr>

<tr>

<td><iframe src="https://player.vimeo.com/video/93206523" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/93206523" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/93206523" width="160" height="90"></iframe></td>

</tr>

<tr>

<td style="text-align: center;"><strong>Video 7</strong></td>

<td style="text-align: center;"><strong>Video 8</strong></td>

<td style="text-align: center;"><strong>Video 9</strong></td>

</tr>

</tbody>

</table>

And this is what it looks like on the page:

video-table.png

How would this work for you?

Hello, Stefanie,

Thank you again for helping me with the tables. I copied a few things below for you to look at. I did use the html editor and changed the size. My problem is that all the other cells get changed when I do this. I saw your example, and that is exactly what I am trying to do. Please see below. Any help is appreciated. It might be better if I just embed the videos and drag them to size without using tables, or insert a cell above or below the video and just type in it.

Craig

<iframe style="width: 87px; height: 67px;" title="60 Minute Warrior Strength - Power Yoga Class" src="https://player.vimeo.com/video/135099072" width="5" height="5" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen"

?

 @shapcr ​, I played around with your code for a little while. The main problem I had was that the dimensions you were using, 87 px wide and 67 px in height, were too small to allow the full screen toggle to appear on the thumbnails, so I increased the size of the videos. I stripped out some of the extraneous HTML and also added a border and some titles. Here's the code:

<h3>Videos (click on the symbol at the lower right to toggle to full screen):</h3>

<table style="border-color: black;" border="2" cellspacing="5" cellpadding="5">

<tbody>

<tr>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

</tr>

<tr>

<td style="text-align: center;"><strong>Video 1<br /></strong></td>

<td style="text-align: center;"><strong>Video 2<br /></strong></td>

<td style="text-align: center;"><strong>Video 3<br /></strong></td>

<td style="text-align: center;"><strong>Video 4<br /></strong></td>

<td style="text-align: center;"><strong>Video 5<br /></strong></td>

<td style="text-align: center;"><strong>Video 6<br /></strong></td>

</tr>

<tr>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

</tr>

<tr>

<td style="text-align: center;"><strong>Video 7<br /></strong></td>

<td style="text-align: center;"><strong>Video 8<br /></strong></td>

<td style="text-align: center;"><strong>Video 9<br /></strong></td>

<td style="text-align: center;"><strong>Video 10<br /></strong></td>

<td style="text-align: center;"><strong>Video 11<br /></strong></td>

<td style="text-align: center;"><strong>Video 12<br /></strong></td>

</tr>

<tr>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

</tr>

<tr>

<td style="text-align: center;"><strong>Video 13<br /></strong></td>

<td style="text-align: center;"><strong>Video 14<br /></strong></td>

<td style="text-align: center;"><strong>Video 15<br /></strong></td>

<td style="text-align: center;"><strong>Video 16<br /></strong></td>

<td style="text-align: center;"><strong>Video 17<br /></strong></td>

<td style="text-align: center;"><strong>Video 18<br /></strong></td>

</tr>

<tr>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

</tr>

<tr>

<td style="text-align: center;"><strong>Video 19<br /></strong></td>

<td style="text-align: center;"><strong>Video 20<br /></strong></td>

<td style="text-align: center;"><strong>Video 21<br /></strong></td>

<td style="text-align: center;"><strong>Video 22<br /></strong></td>

<td style="text-align: center;"><strong>Video 23<br /></strong></td>

<td style="text-align: center;"><strong>Video 24<br /></strong></td>

</tr>

<tr>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/135099072" width="160" height="90"></iframe></td>

<td><iframe src="https://player.vimeo.com/video/93206523" width="160" height="90"></iframe></td>

</tr>

<tr>

<td style="text-align: center;"><strong>Video 25<br /></strong></td>

<td style="text-align: center;"><strong>Video 26<br /></strong></td>

<td style="text-align: center;"><strong>Video 27<br /></strong></td>

<td style="text-align: center;"><strong>Video 28<br /></strong></td>

<td style="text-align: center;"><strong>Video 29<br /></strong></td>

<td style="text-align: center;"><strong>Video 30<br /></strong></td>

</tr>

</tbody>

</table>

And here's how the finished product appears on the page:

video-table-for-Craig-Shapiro.png

You should be able to play around with this code to make the videos appear exactly as you'd like! And although this guide link may have been provided earlier in the conversation, I'm including the link again here for your convenience: How do I insert a table using the Rich Content Editor?

 @shapcr ​, did the code solution I provided work for you?

0 Kudos

?Hello, Stephanie,

I still am having difficulty setting things up. I am going to work on some things this week. Not sure what else I can do. It is frustrating that making the tables is so complicated. Most people are not familiar with html code. You should be able to just drag the box and insert a video or picture. Not your fault, but just something to think about.

Let me know if you have any suggestions.

Craig

0 Kudos

Hi  @shapcr , my apologies for going too far afield with the HTML.

With YouTube videos, this is relatively easy to accomplish without HTML, because Canvas accommodates YouTube URLs (no harvesting embed code and switching views required!). So to make a table that accommodates nine YouTube videos, you'd simply create a table with three rows and three columns and appropriate cell padding (all of which you can set in the Rich Content Editor table creator), and then click in each box of the table to create a separate URL for each YouTube video.

However, when you're embedding Vimeo videos, as yours are, you have to be able to harvest embed code and switch to the HTML Editor in order to place those in the table.

I'll leave this discussion open for the time being. Perhaps someone else knows of an easier way to accomplish a table of Vimeo videos, all of which are the same size, without having to use HTML.

RobDitto
Community Champion

For what it's worth, our institution recently had a course stop arranging videos in tables.  Below a certain cell size, the media player controls could not be seen or accessed.

 @RobDitto ​, yes, that's the exact problem I ran into when I was setting the dimensions in the table HTML.

Chris_Hofer
Community Coach
Community Coach

 @shapcr ​...

Here is something else to try.  When you create your 3x3 table (top row for your Headings and then two rows for your six videos), you'll want to make sure the entire table width is 100% (not a pixel width).  That way, it will display a bit better for people on different sized monitors.  The part that I think is missing is that you also want to make sure that your columns are also about equal percentages in width.  If you just created the table at 100% and did not specify a width for your cell columns, I can see why the columns would re-size as you put text, embedded videos into each cell.  The table doesn't know to keep the cell width the same for all columns...because you haven't told it to do so.  Here is an example of what it could look like for you:

VideoTable.jpg

Obviously, where you see "Video 2", "Video 3", "Video 4", "Video 5", and "Video 6", those would be where your other videos are.  So, how did I get the columns to keep that size?  Here's the code:

<table style="width: 100%;" border="2" cellspacing="2" cellpadding="2">

<tbody>

<tr>

<td style="width: 33%;"><strong>Header 1</strong></td>

<td style="width: 33%;"><strong>Header 2</strong></td>

<td style="width: 34%;"><strong>Header 3</strong></td>

</tr>

<tr>

<td style="width: 33%;"><iframe src="https://player.vimeo.com/video/58752872?title=0&byline=0&portrait=0" width="300" height="169" allowfullscreen="allowfullscreen"></iframe></td>

<td style="width: 33%;">Video 2</td>

<td style="width: 34%;">Video 3</td>

</tr>

<tr>

<td style="width: 33%;">Video 4</td>

<td style="width: 33%;">Video 5</td>

<td style="width: 34%;">Video 6</td>

</tr>

</tbody>

</table>

Basically, since 100% doesn't quite divide into equal percentages, I set the left-most column to 33% (lines #4, #9, and #14), the center column to 33% (lines #5, #10, and #15), and the right-most column to 34% (lines #6, #11, and #16).  Then, as an example, I grabbed the embed code from an Instructure video hosted on Vimeo's website and replaced my "Video 1" text with the embed code (line #9).  You'd do the same with the other videos that you wanted to insert into the table.

The "cellspacing" and "cellpadding" values in line #1 of the code can be changed, too, if you want additional space between the cells.

Hope this helps!