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