Responsive YouTube block?

Permalink
Hi, is it possible to insert Youtube videos in a way that they become responsive? Eg: I added a video to my website, and it looks fine on a computer screen. However, when I check it our on my iPhone, it's just way too big and it's not responsive.

I would like the video to scale, maybe using a percentage value instead of width and hight value?

Thanks!

ZillionProductions
 
VPenkov replied on at Permalink Reply
VPenkov
Replace the YouTube video with an image and have it load in a fancybox (http://fancyapps.com/fancybox/#examples)

There's probably a block for that, and fancybox is responsive. This would be an easier option.
shahroq replied on at Permalink Reply
shahroq
You can create a costume template for core youtube block and include jquery fitvids (http://fitvidsjs.com/) inside the template. plugin do the job for you.
ZillionProductions replied on at Permalink Reply
ZillionProductions
Hi, thanks for your rey. I'm not sure I uderstand how I should do this. Would it be possible for you to write a step by step? Let me know and thanks again.
shahroq replied on at Permalink Reply
shahroq
Check this tutorial, it explains how to create a costume template for a block:
http://www.concrete5.org/documentation/how-tos/designers/customize-...
mead replied on at Permalink Reply
mead
https://www.concrete5.org/marketplace/addons/quickie-player/

already an add-on to do this.
jobyone replied on at Permalink Reply
jobyone
I just yesterday wrote a how-to tackling this problem:
http://www.concrete5.org/documentation/how-tos/designers/make-all-y...

You can add that CSS in the theme customization, and it will make all your YouTube embeds responsive.
enlil replied on at Permalink Reply
enlil
Nice! My Enlil Youtube package uses a similar approach as well.
transmitter replied on at Permalink Reply
transmitter
Thank you VERY much for sharing that!
Pluto replied on at Permalink Reply
Pluto
Thanks for this.
theneptune replied on at Permalink Reply
theneptune
Its really so helpful. Thank you very much.