Change size of video player on Canvas page

[cqiu19]

I'm trying to embed videos from my files and adjust the size of video player on Canvas pages. I have tried to tweak the html code but couldn't find a way to adjust the player size. Can someone help me?

[Chris_Hofer · Accepted solution]

Hello  @cqiu19  Welcome to the Canvas Community.  Thank you for posting your question.  Out of curiosity, have you considered uploading your videos to your YouTube account and then embedding those videos inside your course?  The embed code that you harvest from YouTube would allow you to easily edit the height and width of the videos to your liking via the HTML side of the RCE (Rich Content Editor) in Canvas.

[cqiu19]

Hi Chris,

No these videos are secure and we have them all on vimeo already, but with a passcode. Can we bypass the passcode if i just link the video? Otherwise I need to make them internal. 

[Chris_Hofer]

Hello  @cqiu19 ...

Thanks for the additional information.  Unfortunately, I am not familiar with passcodes and videos, so I wouldn't be able to help you on that.  Does your school have a secure streaming video server where you could upload your videos and then harvest embed code from that server?  You might need to check with your school's IT department to see if that's a possibility.  That might be another option for you instead of uploading the videos inside of your Canvas course(s).

[cqiu19]

Also, I want to align the video thumbnail to the center of the page. I couldn't do it. Are there any way to solve that?

[Chris_Hofer]

Hi  @cqiu19 ...

Pretty sure this is possible.  Once you get the embed code and paste it into the HTML side of your page of content in your course, return to the non-HTML side of the RCE (Rich Content Editor).  Then, you may be able to either select the entire video or just place your cursor immediately to the left of the video, and then just use your text align tools provided in the RCE to left/center/right align the video however you want.

Does this help?

[klwhiteside]

Hi Chris,

Is there a way to center videos that have been placed on a page from the Canvas Files? I have 10 videos in Canvas files and when I try to center then, nothing works. I have the same issue with videos that I record on the page using the recording function on the text editor ribbon. 

[Chris_Hofer]

Hello there,  @klwhiteside ...

Can you please describe the steps you are taking to upload your video to your Canvas course?  And, if you could maybe share a screen shot or two of what you are seeing, I think that would also be helpful.  Thanks!

[klwhiteside]

Hi Chris,

While on the Home Page for my course, I clicked the Record/Upload Media button in the Rich Text Editor and recorded a video. Now that the video is on the page, I'm unable to select it or put my cursor next to it. If I could select it, I might be able to then click "Center." Not sure if this is something that can be addressed in the HTML Editor. 

[klwhiteside]

The rest of the videos that I have in my course were uploaded to the Files section. From there, I inserted them by putting my cursor where I wanted them to appear and selecting them from the Files content area on the right. 

When I do this, the videos are left-justified. Nothing that I do centers them. I thought putting them in a table might help. It does to some degree. I found I can center the text in the table, but not the videos.

I'm sure this is the result of a step I'm not taking. I just need to know what that is.

I appreciate your help. 

[Chris_Hofer]

Hi there,  @klwhiteside ...

I was wondering if that was what you were doing...so thanks for confirming your steps.  In trying to replicate exactly what you were trying to do, I noticed the same behavior where any video was aligning to the left side of the page.  But, I'm wondering if this is really that big of a deal anyway.  Why do I say this?  Well, if you were to save the page and view it the thumbnail of the video will still be left-aligned...but when you actually play the video, it takes up the entire space of my screen.  So, I really cannot tell one way or the other if the video is centered on the page when it starts to play.  I suppose I could modify the HTML slightly so that it was something like:

<p style="text-align: center;"><a id="media_comment_m-5QckVS6cJPvpr1..." class="instructure_inline_media_comment video_comment" data-media_comment_type="video" data-alt=""></a></p>‍‍

Here, you can see that I've added in style="text-align: center;".  However, that still doesn't place the thumbnail on the center of the page as you'd like it.  What I did notice, though, is that when I clicked the play button on the thumbnail, I briefly saw the video move to the center of the page, but then it went full screen again.

So, while I understand there might be some good reasons why you'd want your videos to appear as centered on the page design-wise, I'm not sure there is anything else that can be done.  That's why I'm going to share your question with the Canvas Developers group here in the Community in hopes that someone with a bit more HTML knowledge might be able to tell us if this is possible or not.  If you are not yet following this group, you can use the link that I have provided, and then you will see two buttons at the top right corner of the screen.  Click on both "Follow" and "Actions".  (You'll have to further select "Join group" from the "Actions" menu.

I hope this will be of help to you, Kim.

[klwhiteside]

Hi Chris. This is helpful. My issue is more cosmetic than functional. I will try the code you've provided. Thanks for sharing this concern with the Developers. 

[Robbie_Grant]

 @cqiu19 ,

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while, so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

How we keep your questions flowing! 

Robbie

[SandyThompson]

Hi there,
I don't think this question was resolved.  I have the same question and this didn't answer it other than to say that perhaps it didn't matter if we can't centre a video on a canvas page.  Or did I miss something?  I would like to know how to make the embedded video smaller and be able to place it where I would like it, instead of where it turns up.  It sounds like perhaps this isn't possible.  Could you confirm that please?

Thank you