1

first time poster, looking forward to getting involved.

I'm trying to embed a video from a private hosting service (I work for a university) into our website and I'm having trouble making it responsive. Unlike a Youtube or Vimeo video, the height and width seem to be defined in the "src" as shown:

<iframe width="640" height="385" src="http://videolibrary.sheffield.ac.uk/player?autostart=n&fullscreen=y&width=640&height=385&videoId=6432&quality=hi&captions=n" frameborder="0" scrolling="no"></iframe>

I've managed to fix this quite simply with a Youtube video before by using the following CMS (and placing the embed code within the appropriate div) 

    <style type="text/css">
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}</style>

however this just isn't working here. I cannot find a way to edit the embed code and I can't find any tips anywhere that work with this. If anyone has any ideas I would be very grateful!

mingos
  • 23,778
  • 12
  • 70
  • 107
Steve McCarthy
  • 27
  • 6
  • possible duplicate of [Shrink a Youtube video to responsive width](http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width) – davidcondrey Oct 05 '14 at 00:00

2 Answers2

1

I guess this jQuery plugin for fluid width video embeds might help you, have a look!

http://fitvidsjs.com/

Sam
  • 139
  • 1
  • Thanks for the tip but unfortunately that doesn't seem to be doing anything, unless I've added it wrong. If anything it has just forced the dimensions of the video and the rest of the page has responded to it, although looking at the details I don't think the video player I'm using is supported. – Steve McCarthy Jul 24 '13 at 16:10
  • There is an option to add your own video vendor. Look at the documentation here at https://github.com/davatron5000/FitVids.js for more details. – MGDTech Jul 25 '13 at 20:19
  • This still doesn't seem to work. It's just cropping the video rather than resizing it. I expect this may be due to the "&width=640&height=385" detail in the source url of the video. If I remove that then the video disappears all together. – Steve McCarthy Jul 30 '13 at 14:52
0

I used CSS to do it. For my uses (embedding videos from Vimeo on a responsive site), this works great in the browsers I've tested in:

@media screen and (max-width: 750px) {
    iframe {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }
}

It doesn't require image placeholders, so it's pretty simple.

Caitlin M
  • 203
  • 2
  • 7