Skip to main content

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

A guide to help you create and edit your subject, course, topic and general purpose guides

Using Bootstrap for Embedding 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:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class="row">
<div class="col-sm-6">

<div class='embed-container'><style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//M1J0CR6H_8I' frameborder='0' allowfullscreen></iframe></div>
</div></div>
<div class="col-sm-6"><p>Dogs at the library! Best thing ever!</p></div>
</div>

 

Dogs at the library! Best thing ever!