November Happy Hour will be moved to Thursday December 5th.

AI OnAI Off

Responsive embedded media

Rudi von Staden
Rudi von Staden
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
Rudi von Staden
Rudi von Staden
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
Torjus Eidet
Torjus Eidet
Vote:
 
#86203
May 15, 2014 16:37
Rudi von Staden
Rudi von Staden
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.