July 4, 201511 yr hi all, i am testing coub(dot)com which allows you to create short looped videos and has pretty good embedding support. However. I made a draft of a site the videos is in the background, on top is a white div with some text. i would like to know how I can force the video to stretch fill the browser window. I wrote to coub and they said it can be done with javascript. they have done it with their homepage coub(dot)com (see at the login/signup page). I can't seem to decipher how they did it. any thoughts? this is what I have. <html class='no-js' lang='en'> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <style> html, body { position:relative; height:100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background:none; color:none; margin:0; padding:0; } </style> </head> <body> <iframe id="coubVideo" src="http://coub.com/embed/73x2s ?muted=true& autostart=true& noControls=true& noHDControl=true& noSiteButtons=true& originalSize=false& hideTopBar=true& startWithHD=true" allowfullscreen="true" frameborder="0" style="display: inline; margin: 0 auto; overflow:hidden;" height="100%" width="100%"></iframe> <div style= "overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; left:0; background-color: white; width:80%; height: 80%;"> test page 1 </div> </body> </html> Thanks
July 5, 201511 yr Author by the way here is the fiddle http://jsfiddle.net/postcolonialboy/7nvhscru/ the video doesn't play on jsfiddle but that's not a problem.
July 9, 201511 yr They have wrote a simple function that detects the window width and height, then sets the video values accordingly. Here is their function, using a combination of vanilla JS and jQuery: CoubEmbed.prototype.resizePlayer = function() { var height, width; console.log("CoubEmbed", "Resize."); width = $(window).width(); height = $(window).height(); this.viewer.css({ width: width, height: height }); return $('object').attr('width', width).attr('height', height); }; You can do the same with a few lines of JavaScript: (function() { var width = window.innerWidth, height = window.innerHeight, player = document.getElementById('coubVideo'); player.style.width = width + 'px'; player.style.height = height + 'px'; }()); I have created an example, here: http://jsfiddle.net/LyndseyB/sbLoxp2w/ Hope this helps
Create an account or sign in to comment