Skip to content

Instantly share code, notes, and snippets.

@jramsahai

jramsahai/dynamically_resize_player_using_css.html

Last active January 14, 2019 16:20
Show Gist options
  • Save jramsahai/7892535 to your computer and use it in GitHub Desktop.
Save jramsahai/7892535 to your computer and use it in GitHub Desktop.
Download ZIP
If you're looking for a way to dynamically resize the Vidyard inline JavaScript player, you'll find an example of one way to do it below.
Raw
dynamically_resize_player_using_css.html
<!--
Refer to this article for more information:
http://knowledge.vidyard.com/Core_Features/Publish_your_players/011_Publish_your_player/014_Dynamically_resize_the_inline_player
-->
<html>
<head>
<style type="text/css">
.innerContainer {
position: relative;
display: block;
width: 100% !important;
height: 0;
padding: 56.25% 0 0 0; /* This should reflect your video aspect ratio */
}
.outerContainer {
max-height: 360px; /* Set this to the height of your player */
}
.vidyard_player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 640px; /* These should be the dimensions of your player */
max-height: 360px;
}
.vidyard_player > span {
width: 100% !important;
height: 100% !important;
margin: 0 auto !important;
}
</style>
</head>
<body>
<div class="outerContainer">
<div class="innerContainer">
<!-- Vidyard inline Javascript embed here -->
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment