Video Borders and Boxes
Code Snippet Library
On this page we have a couple of examples of how you can combine videos with some of the other types of styles found in this resource, such as borders and callout boxes.
Video iFrame Border
First, we demonstrate how to use horizontal and vertical lines to create borders for a video iframe. The example code will give you an idea of how to combine multiple styles within one <div> tag to control for margins, spacing, thickness, and color.
Video 2.2. Penn State Values: Excellence
Decorative Accent Borders Code to Copy
<div style="border-right: solid 0.75rem #1E407C; max-width: 600px; padding-bottom: 0.25rem; margin: 1rem 0;">
<div style="border-right: solid 0.5rem #1E407C; max-width: 580px; margin-right: 0.75rem;">
<iframe src="[SOURCE URL]"></iframe>
<hr style="border-top: solid 0.25rem #1E407C; margin: 0.25rem -10% 0.25rem 10%;" />
<p>Video [#.#. TITLE]</p>
</div>
</div>
Video Callout Box
Sometimes you may want to give a video additional standing or emphasis, which can be done with a callout box. Adding a height and width property to the code snippet allows you to create a background that extends beyond the boundary of the video. Adding the paragraph tag <p> with text-align: center centers the video horizontally, and adding the empty paragraph tags at the top and bottom within the <div> centers the video vertically.
We also have an example showing how you can align the video to the right (or left) to place it next to supplemental text.
Video Call Out Box Code to Copy
<div style="margin: 1em 0em; padding: 10px 15px; border: 2px solid #A2AAAD; background: #f5f5f5; font-size: 100%; overflow: auto;">
<p> </p>
<p> </p>
<p style="text-align: center;"><iframe src="[SOURCE URL]" ></iframe></p>
<p> </p>
<p> </p>
</div>
Video in Callout Box With Text
Introduction to Accessibility Video
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac felis donec et odio pellentesque diam volutpat commodo. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Molestie ac feugiat sed lectus. Quis risus sed vulputate odio ut enim blandit. Dignissim sodales ut eu sem integer vitae justo eget. Risus sed vulputate odio ut enim blandit volutpat maecenas. Amet risus nullam eget felis eget nunc lobortis mattis. Molestie a iaculis at erat. Ipsum faucibus vitae aliquet nec ullamcorper. In egestas erat imperdiet sed. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. Cursus eget nunc scelerisque viverra mauris in. Urna porttitor rhoncus dolor purus non.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac felis donec et odio pellentesque diam volutpat commodo. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Molestie ac feugiat sed lectus. Quis risus sed vulputate odio ut enim blandit. Dignissim sodales ut eu sem integer vitae justo eget. Risus sed vulputate odio ut enim blandit volutpat maecenas. Amet risus nullam eget felis eget nunc lobortis mattis. Molestie a iaculis at erat. Ipsum faucibus vitae aliquet nec ullamcorper.
Video in Call Out Box With Text Code to Copy
<div style="margin: 1em 0em; padding: 15px 20px; border: 2px solid #A2AAAD; background: #f5f5f5; font-size: 100%; overflow: auto;">
<h3>Video Heading</h3>
<div style="float: right; margin-left: 1em;"><iframe src="[SOURCE URL]" ></iframe></div>
<p style="text-align: left;">Text goes here</p>
<p> </p>
</div>
Film Frame Callout Box
This style is similar to the standard video callout box but designed to replicate the look of a film frame. As with the others, this style can be used with or without a heading to introduce the video, so adjust as needed based on the heading structure of your page.
Video: Build a Tower, Build a Team
Build a tower, build a team Transcript
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Film Frame Code to Copy
<div style="background-color: #e8e8e8; max-width: 1280px; margin: 2.5rem auto; padding: 0 1.75%;">
<div style="border-left: 1.25vw dashed #ffffff; border-right: 1.25vw dashed #ffffff;">
<div style="border-left: 1.25vw dashed #ffffff; border-right: 1.25vw dashed #ffffff; padding: 1vw 1.5%;">
<div style="background-color: #f5f5f5; border-radius: 5px; padding: 2%;">
<h3>Video: Title of Video</h3>
<div style="display: flex; flex-wrap: wrap; justify-content: space-around; margin: 1.5rem 0;">
<div style="max-width: 560px;"><iframe Video embed code></iframe>
<details>
<summary>Video Title Transcript</summary>
<div style="margin: 1rem 0 1rem 1rem; padding: 0.5rem 1rem; border: 2px solid #cccccc; background: #eeeeee; overflow: auto;">
<p>Transcript text.</p>
</div>
</details>
</div>
</div>
</div>
</div>
</div>
</div>
Guidelines
- You can change the margins if you don't want the box to span the entire width of the page (see the Box Module for details).
- You can take out or change the border thickness and color.
- You can change the background color.
- You can move the video to the right or left and include associated text.