Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more

AI OnAI Off

Responsive embedded media

Vote:
 

I am using the Twitter Bootstrap framework to get a responsive design for my site. What I am trying to do now, is have it work with embedded media also. I have tried using flex-video css, fitvids.js, fluidvids.js, and EmbedResponsively.com, but it always overflows its container:

Any suggestions to get responsive media working?

#86189
May 15, 2014 15:18
Vote:
 

I was able to get it working using the CSS markup from Smashing Magazine's article. However, it requires that editors add a .video-container div around their video embeds. Is there some way to add this automatically?

#86200
May 15, 2014 16:31
Vote:
 
#86203
May 15, 2014 16:37
Vote:
 

That could work Torjus, except that I'd like to be able to embed responsive videos in the main content as well as a block, and seems to only support YouTube (not Vimeo and friends). In the meantime, I've updated my css to use class .embed-container instead of .video-container. That way, I can require that editors paste the output from embedresponsively.com. The TinyMCE editor / EPiServer will strip most of the code, but it will leave the div with class .embed-container. Not ideal, but as a hack it might be sufficient for our needs.

#86208
May 15, 2014 16:51
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.