Forums

Making a YouTube Video Responsive

Permalink
I need to put a YouTube video in the middle of the site, but when I use the YouTube Block, it doesn't scale the video responsively. Is there a hidden setting that I am not seeing, or is there a better way to go about this?

Thanks!
Blenderite
 
studio108 replied on at Permalink Reply
studio108
Hi, this is what I have used in the past.

http://www.concrete5.org/documentation/how-tos/designers/make-all-y...

Hope this helps
Blenderite replied on at Permalink Reply
Blenderite
Ok so that would go in Custom Template?
studio108 replied on at Permalink Reply
studio108
You can do or just use it in the main css file and the block picks it up. I have just tested it on a 5.7 site and it worked fine.
Blenderite replied on at Permalink Reply
Blenderite
Do I need to do anything special to make sure it knows which block is the YouTube block, or is that handled by the .youtube at the top of the code there?
Steevb replied on at Permalink Reply
Steevb
As previously mentioned drop the following code in your main.css or main.less file and all will be fine.
.youtubeBlock{ position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0}
.youtubeBlock iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%}