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?

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

?

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

 @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?