Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Joomla 2.5 w/ Responsive Design SOLVED!


I use BOTR and have moved to Joomla 2.5 so the lack of a native plug-in was exasperating. I have used the plugin on our 1.5 corporate site for years.
Add responsive design into the mix and things get even hairier.

First attempt: Using the iframe embed. That worked but the iframe and the video within it wouldn't scale. (had to modify the editor to allow iframe)

2nd attempt: Use the javascript embed method - As you know, you cannot embed javascript into an article or module without a third party mod or plugin so I went with Jumi as that has worked flawlessly for me in the past.
(http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-content/1023)
That worked as well but once again the video would not scale.

The fix: Use CSS and place the Javascript embed within a couple of containers.

You will also still need JUMI (or another mod/plugin that will allow you to insert script)

The Divs
bc.. <div class="video-wrapper">
<div class="video-container"><script type="text/javascript" src="http://content.bitsontherun.com/players/XXXXXX-XXXXXX.js"></script>
</div>
</div>



CSS:
bc.. .video-wrapper {
width: 720px;//I set MAX width here to keep the video from going blowing up
max-width: 100%;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}




This works and even scales the fallback flash player properly as well

1 Community Answers

JW Player

User  
0 rated :

Forgot to mention this: I used the "padding-top: 30px;" to create a letter box effect. It isn't neccessary.

This question has received the maximum number of answers.