Embed a Panopto video in an Edublog

Embed a Panopto video in an Edublog

This tutorial has moved to the Digital Tools pages on SharePoint Online. <a title="Link to FAQ opens in new tab/window" href="https://unibrightonac.sharepoint.com/sites/digital/SitePages/EmbedPanoptoVideoInEdublogs.aspx" target="_blank" rel="noopener">Direct link to the FAQ: Embed Panopto Video In Edublogs</a>. <!--<strong>Question:</strong> I have made created/uploaded a video in Panopto and I would like to make available via my Edublog site/blog. How can I do that? <strong>Answer:</strong> <ol> <li>Go to your video in Panopto admin or the Panopto area with the module where you uploaded it in My Studies. Click on the 'share' button underneath the video. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/01_embedpanopto.png"><img class="alignnone wp-image-1597 size-large" style="border: 1px solid black;" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/01_embedpanopto-1024x570.png" alt="Screenshot of the options for a video as shown in Panopto admin" width="550" height="306" /></a></li> <li>In the 'share' options select the option to allow 'anyone with the link' to view the video. There is no save button on this page, this option will be saved automatically.<a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/02_embedpanopto.png"><img class="alignnone wp-image-1598 size-large" style="border: 1px solid black;" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/02_embedpanopto-1024x830.png" alt="Screenshot of the sharing options for a video in Panopto admin view" width="550" height="446" /></a></li> <li>Click on the 'Embed' option at the top of the 'share' options window. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/03_embedpanopto.png"><img class="alignnone wp-image-1599 size-large" style="border: 1px solid black;" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/03_embedpanopto-1024x594.png" alt="Screenshot of the embed option as shown in Panopto admin view" width="550" height="319" /></a></li> <li>Change value in the width dimension to 600px. The default is 720px; this is too wide for most Edublog posts. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/041_embedpanopto.png"><img class="alignnone wp-image-1602 size-large" style="border: 1px solid black;" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/041_embedpanopto-1024x582.png" alt="Screenshot showing the width dimention options for embed in Panopto admin view" width="550" height="313" /></a></li> <li>Click on the 'Copy Embed Code' button shown at the bottom of the window. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/05_embedpanopto-1.png"><img class="alignnone wp-image-1603 size-large" style="border: 1px solid black;" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/05_embedpanopto-1-1024x682.png" alt="Screenshot showing the button to copy the embed code in Panopto admin view" width="550" height="366" /></a></li> <li>Login to Edublogs and go to the blog post or page in your Edublog site where you would like the video to be placed. Click on the 'Edit Post/Page' button. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/06_embedpanopto.png"><img class="alignnone wp-image-1604 size-large" style="border: 1px solid black;" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/06_embedpanopto-1024x414.png" alt="Screenshot in edublogs showing how to edit a blog post - button on top-right when logged in" width="550" height="222" /></a></li> <li>In the text editor, select the 'Text' tab. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/07_embedpanopto.png"><img class="alignnone size-large wp-image-1606" style="border: 1px solid black;" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/07_embedpanopto-1024x404.png" alt="Screenshot in the blog post editor showing the tab for 'Text'" width="550" height="217" /></a></li> <li>In the text view, place your mouse cursor below any exiting text and then paste in the embed information. Recommended: the keyboard shortcut to paste is CTRL + v (on a Mac Cmd + v). <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/08_embedpanopto-1.png"><img class="alignnone size-large wp-image-1607" style="border: 1px solid black;" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/08_embedpanopto-1-1024x525.png" alt="Screenshot showing paste on the embed code in the blog post text editor" width="550" height="282" /></a></li> <li>Switch back to the 'visual' tab to check that your embed is sucessful. Click on 'Update' on the right to save your changes. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/09_embedpanopto.png"><img class="alignnone size-large wp-image-1608" style="border: 1px solid black;" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/09_embedpanopto-1024x418.png" alt="Screenshot showing the update button on the right of a blog post in edit mode" width="550" height="225" /></a></li> <li>Voila! You can now view your post and see the embedded video in the live post view. An embedded video is a<em> watched video </em>- you should get much better engagement by making this small change. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/10_embedpanopto.png"><img class="alignnone size-large wp-image-1609" style="border: 1px solid black;" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2020/10/10_embedpanopto-1024x758.png" alt="Screenshot showing a video embedded in a blog post entry - live view" width="550" height="407" /></a></li> </ol> -->