UConn Library's LibGuides Standards and Best Practices — Using Bootstrap for Embedded Videos

In LibGuides, the default size for embedding videos is 100% for the "embed-container". This is so because it is designed to be able to change size for responsive design. To change that and add a extra column inside a video widget you can use bootstrap!

By adding code that can divide the embedded video space into two columns, you can control the look and feel of the video and also add content like a paragraphs, ordered (1, 2, 3) or unordered lists (bullets). The key is to make sure that when using the element <div class="col-sm-#"> the number for the two columns need to add up to 12. For equal size columns, use <div class="col-sm-6"> and <div class="col-sm-6"> which equal 12. You can play with the numbers to change the size of the columns.

You can use HTML tags to format text in the columns too. You can use <p></p> for paragraph; <strong></strong> for bold; <em></em> for italics, etc.

So when you are ready, use the code generated by the Embedded Responsively tool and then modify it using bootstrap.

See the bootstrap code that I used to modify this video widget below: