Old 14th April 2012, 22:02
theRamenNoodle theRamenNoodle is offline
Junior Member
Join Date: Feb 2009
Posts: 2
Thumbs down Unnecessary script is breaking responsive web design

LiveStream's server-side code loaded from an embedded iframe has scripting that is breaking responsive design techniques.

I'm working on a live-streaming page that uses responsive web design. I've figured out how to resize the LiveStream player, but it only works on refresh, not resizing. The problem is built into LiveStream, not my code.

Looking at LiveSteam's code that is loaded through the iframe, I found that #layout4 and #layout4-lsplayer are both using Javascript to captured the width and height of the iframe upon load, and the script is then adding this width and height as inline styles to both divs.

<div id="layout4" style="display: block; width: 960px; height: 564px; ">
<div id="layout4-lsplayer" style="width: 960px; height: 564px; "> </div>

This means that if the iframe is resized from responsive web design, that the script has already set a fixed pixel width and height to the internal player. The only way to resize the player is to refresh the browser, which is poor practice for responsive web design.

After the page has loaded, I can strip the inline CSS from these two elements, and every works perfectly. In reality, this seems quite unnecessary, especially if the width and height are being set (twice) in the iFrame code.

Please turn this off and make the code more semantic without the inline CSS, or else tell us how I can override it and prevent LiveStream's script from breaking the layout on my site.

However, it would also work to override these pixel values with a percentage, like 100%, so I can let me design control the size, not LiveStream's Javascript.
Attached Images
File Type: jpg Screen Shot 2012-04-14 at 9.57.32 PM.jpg (122.7 KB, 20 views)
Reply With Quote
Old 13th February 2013, 22:07
vyrtnet vyrtnet is offline
Junior Member
Join Date: Apr 2012
Posts: 2

Anyone resolve this? I am having a similar issue.

When resizing browser, the ideal behavior should be that the <iframe> from Livestream fills the intended browser width, but its not. What's the best way to resolve?
Reply With Quote
Old 1st March 2013, 16:08
the_chapel the_chapel is offline
Junior Member
Join Date: Jan 2011
Posts: 1

I found it only works to refresh the iframe using Jquery on window resize.

      <div id="livestreamPlayer">
              <iframe width="640" height="360" id='livestream' src="http://cdn.livestream.com/embed/cmslive01?layout=4&color=0xe7e7e7&autoPlay=false&mute=false&iconColorOver=0x888888&iconColor=0x777777&allowchat=false&width=640&height=360" style="border:0;outline:0" frameborder="0" scrolling="no"></iframe>

$(window).resize(function () {
            // resize livestream player
            $('#livestream').attr('src', 'http://cdn.livestream.com/embed/cmslive01?layout=4&color=0xe7e7e7&autoPlay=false&mute=false&iconColorOver=0x888888&iconColor=0x777777&allowchat=false&width=640&height=360');
Combined with using FitVids.js
    $("#livestreamPlayer").fitVids({ customSelector: "iframe[src^='http://cdn.livestream.com']"});
Reply With Quote
Old 23rd April 2013, 18:25
wzupsmith wzupsmith is offline
Junior Member
Join Date: Sep 2011
Posts: 1

There is a bit of a work around. I noticed on the embed options there is a bit of text that reads

"This is our new iFrame embed code which supports flash and is mobile ready. Want to use the old embed code instead? Click here"

If you use the old embed code it doesn't use an iframe and you have a bit more flexibility to do this sort of manipulation.
Reply With Quote
Old 24th February 2014, 20:30
varvid varvid is offline
Junior Member
Join Date: Oct 2010
Posts: 1

I can confirm, having the exact same issue. Should be a a fairly easy fix for the Livestream folks to make their iframe embed responsive.

Originally Posted by wzupsmith View Post
If you use the old embed code it doesn't use an iframe and you have a bit more flexibility to do this sort of manipulation.
If you use the old embed code, you lose the HTML5 and mobile support.
Reply With Quote

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump