Displaying a video within an iframe within a details tag (without the video getting squished)

[TravisHyzak]

Hi all,
I have a Canvas page with a bunch of details tags that I'm using like an accordion. In one of the <details>, I've embedded an iframe that has a video. When I look at it in the RCE, it displays mostly how I want it to, except that I want it to be center-aligned. (Shown in attached image canvas_iframe_rce.png)
But when I view it outside the editor, the video player is squished to one side of the screen (shown in canvas_iframe_preview.png).
Here's the section of code:

<div style="background-color: #f7f7f7; padding: 1%; margin-bottom: 5px;">
<details style="background: #f9f9f9; border: #262359 3px solid; border-radius: 15px; padding: 15px;">
<summary style="cursor: pointer; font-size: 16pt;" title="click to expand">Avoid plagiarism</summary>
<p>We mentioned this earlier; while it's not the only reason to cite information, it's still very important to avoid plagiarism. Watch the following video to learn about different forms of plagiarism and how to avoid them:</p>
<iframe src="//pqrc.proquest.com/video/embedded/DJbbN41AC67jU27DkSQIIBHFim0cOvCx?vid=v1231" width="420" height="315" allowfullscreen="allowfullscreen"></iframe>
<p style="text-align: center;">[<em>Plagiarism</em>] | [2 min 4 sec]</p>
<p style="text-align: center;">[<a class="inline_disabled external" href="https://pqrc.proquest.com/learning_module/use_information/objective-3/feature-1172?type=transcript" target="_blank" rel="noopener" data-api-endpoint="https://canvas.queens.edu/api/v1/courses/16931/files/2396386" data-api-returntype="File">
<span>Transcript for <em>Plagiarism</em></span><span class="external_link_icon" role="presentation"><span class="screenreader-only"><em>Links </em>to an external site.</span></span></a>]</p>
</details>
</div>

Anyone have any idea how I can get the video preview to display properly (and center-aligned)?
Thanks,
Travis

[seanbeirnes]

Hello @TravisHyzak,

I have good news and bad news. The good news is that the code below will help you center the iframe by putting it in a div tag and using flexbox.

<div style="width: 100%; display: flex; justify-content: center;">
<iframe src="//pqrc.proquest.com/video/embedded/DJbbN41AC67jU27DkSQIIBHFim0cOvCx?vid=v1231" width="420" height="315" allowfullscreen="allowfullscreen"></iframe>
</div>

The bad news is that it looks like the content loading in the iframe is using some JavaScript to set its own width based on its rendered width at page load time, which may not be accurate since it is hidden by the details tag at first. Later when the details tag is expanded, the width is not recalculated. You may be able to see it display the correct size if you refresh the page and quickly expand the details tag before the iframe finishes loading its content. Unfortunately, there really isn't a good way to fix while keeping it in the details tag.

[TravisHyzak]

Hi Sean,

Thanks so much for your help. I actually got help from our ITS team, who wound up downloading the video and reuploading it through Panopto. I don't remember exactly what else we changed, but it's working now. I'm not sure why exactly, but the video loads and is sized correctly now. It's good to know that external videos embedded in an iframe within a details tag won't adjust when the details tag is expanded after the page is already loaded though.

Thanks,
Travis