Embedding Videos in Tabs Content

[Cbaclaan]

I am attempting to create tabs in Canvas using the HTML code. I have been trying to embed a Recorded Media, such as a Youtube video or a recording done in Canvas. When I am editing in the Rich Content Editor, it will show under the respective tab. When I look in the HTML code, the video is placed under the respective tab. When I SAVE the page, the video is completely gone and not under any of the tabs. I have made sure that the video is uploaded correctly before saving. 

What can I do to ensure the video is found in the tab? Or is it not possible? I have been able to embed other items such as Google Slides PPT and hyperlinks. 

[langlangcat · Accepted solution]

C&P your codes here let me take a look, it should not be any problem, make sure you use iframe tags.

<div class="enhanceable_content tabs" >
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li><a href="#fragment-3">Three</a></li>
</ul>
<div id="fragment-1">Tab One: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<iframe width="560" height="315" src="https://www.youtube.com/embed/yajdlBZSw3Y" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="fragment-2">Tab Two: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div id="fragment-3">Tab Three: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>

[langlangcat · Accepted solution]

C&P your codes here let me take a look, it should not be any problem, make sure you use iframe tags.

<div class="enhanceable_content tabs" >
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li><a href="#fragment-3">Three</a></li>
</ul>
<div id="fragment-1">Tab One: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<iframe width="560" height="315" src="https://www.youtube.com/embed/yajdlBZSw3Y" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="fragment-2">Tab Two: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div id="fragment-3">Tab Three: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>

[Cbaclaan]

<div id="fragment-1">
<p>Tab 1 1 Yellow</p>
<p><img src="https://fwps.instructure.com/courses/67416/files/2636628/preview" alt="1.png" data-api-endpoint="https://fwps.instructure.com/api/v1/courses/67416/files/2636628" data-api-returntype="File" /></p>
<p><iframe style="width: 400px; height: 225px; display: inline-block;" title="Video player for Login to SchoolPace CONNECT.mp4" data-media-type="video" src="https://fwps.instructure.com/media_objects_iframe/m-5MpmbFv3W9xjpfLVKExM1uxHZ4Wb4f8W?type=video" allowfullscreen="allowfullscreen" allow="fullscreen" data-media-id="m-5MpmbFv3W9xjpfLVKExM1uxHZ4Wb4f8W"></iframe>&nbsp;</p>
</div>
<div id="fragment-2">

[langlangcat]

Use direct video link

<div id="fragment-1">
<p>Tab 1 1 Yellow</p>
<p><img src="https://fwps.instructure.com/courses/67416/files/2636628/preview" alt="1.png" data-api-endpoint="https://fwps.instructure.com/api/v1/courses/67416/files/2636628" data-api-returntype="File" /></p>
<p><iframe style="width: 560px; height: 315px;" src="https://nv.instructuremedia.com/fetch/QkFoYkIxc0hhUVFreGJBS01Hd3JCKzh6aDE4PS0tM2YwZWI4NDAyMzBkZTU5Nzg1YTE5MWM3ZTZmOTYyNGNiYzNlYWRmMQ.mp4"> </iframe></p>
</div>
<div id="fragment-2">

the direct video link is " https://nv.instructuremedia.com/fetch/QkFoYkIxc0hhUVFreGJBS01Hd3JCKzh6aDE4PS0tM2YwZWI4NDAyMzBkZTU5Nzg1YTE5MWM3ZTZmOTYyNGNiYzNlYWRmMQ.mp4 "

[langlangcat]

Use direct link:

<div id="fragment-3">Tab Three: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
<p>&nbsp;</p>
<p><iframe style="width: 560px; height: 315px;" src="https://nv.instructuremedia.com/fetch/QkFoYkIxc0hhUVFreGJBS01Hd3JCKzh6aDE4PS0tM2YwZWI4NDAyMzBkZTU5Nzg1YTE5MWM3ZTZmOTYyNGNiYzNlYWRmMQ.mp4 "> </iframe></p>

[Cbaclaan]

If it's a video created in canvas, how do I find the direct link to it? 

[langlangcat · Accepted solution]

open the video, right click on it, copy video address.