Simple embedded video modal
Simple embedded video modal
Straight embedding of videos can sometimes lead to poor loading performance of a web page. But putting the embedded video into a responsive modal via a click on a thumbnail can resolve this, makes pages load faster, and can make it easier on the user to focus on what is going on.
Here is a really simple modal window that draws YouTube and Vimeo embeds from a click on a thumb image.
The embedded video itself is drawn on-the-fly via the component method. The example below doesn't have any particular styling on the thumbs, and you'd probably want to show more on the screen with the thumbs, such as the title, maybe a close button on the modal, etc. This is just the raw basics. Also, the CSS could probably be better - it's trickier handling iframe heights responsively to get them working with unknown aspect ratios, but this is ok for the example and works perfectly fine.
View the source using the links below.
Click on a video thumb to see the popup in action.
We use the component method to dynamically draw the embedded video inside the modal when the thumbnail is clicked, and later remove it from the modal div when it is closed.
HTML for the modal:
You would probably put this div under the body, or somewhere you can get a full-screen position fixed effect. Putting it in the middle of your page may result in only a partial full-screen effect. You may need to move it around your page and adjust the z-index in the CSS until it works for you. If you also have a simple image modal (the previous example) on your site, you don't need this twice. You would merge the CSS declaration for the modal back also.
<div class="str-ModalBack"></div>You could alternatively dynamically render the component into a div on the page instead of in a modal, and that would also solve the page loading speed issue.
As in the Simple image modal example, you would need a way to close the modal on the window popstate event if you were building a single-page application website.