Skip to content

Instantly share code, notes, and snippets.

@jramsahai

jramsahai/dynamically_resize_iframe_inline_player.html

Last active February 8, 2017 05:15
Show Gist options
  • Save jramsahai/7892493 to your computer and use it in GitHub Desktop.
Save jramsahai/7892493 to your computer and use it in GitHub Desktop.
Download ZIP
DEPRECATED: Do not use this anymore. Use this instead: https://gist.github.com/jramsahai/7892535 I ran into a responsive design problem where the player was being cut off because the player itself would become wider than the content area as the width of the screen shrunk.
Raw
dynamically_resize_iframe_inline_player.html
<html>
<head>
<style type="text/css">
#playerdiv {
width: 100%;
height: 100%;
position: relative;
max-width: 640px;
max-height: 360px;
display:block;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function resizePlayer() {
$("#playerdiv").height($("#playerdiv").width()*0.5625);
}
</script>
<script>
var $win = $(window);
$win.on('resize',function(){
resizePlayer();
});
</script>
</head>
<body onload="resizePlayer();">
<div id="playerdiv">
<iframe class="vidyard_iframe" src="//play.vidyard.com/XXXXX.html?v=3.1" width="100%" height="100%" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
</div>
</body>
</html>
@securitybd
Copy link

I am problem with my site as mobile friendly test says " content wider than screen" can you help me ? web link http://www.security.com.bd

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment