Forum

Thread tagged as: Question, Problem, Field-Types

Responsive YouTube video

I'm trying to setup a YouTube block in a freeform content template, which needs to be responsive. The problem I'm having is that the YouTube video is inheriting a width and height in the iframe despite the fact I am not setting these anywhere. Do you know why this could be happening?

My YouTube content template:

<div class="video-container">
<div class="video-embed">
  <perch:content id="video" type="youtube" label="YouTube URL" output="embed" />
</div>
</div>

And the css I'm using to style it:

.video-container {
    width: 100%;
    max-width: 800px;
}

.video-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}

object,
embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

It is resulting in a cropped video and the output html looks like:

<div class="video-container">
<div class="video-embed">
  <iframe width="1280" height="720" src="https://www.youtube.com/embed/EYdFjo7hcOk?" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>

Phil Bowell 0 points

6 years ago

John Robinson 7 points

6 years ago

Hi Phil,

I'm using the same solution. I'm pretty sure all you need to do is to add iframe to this part of your CSS. So:

object,
embed,
iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Andy Clark 0 points

5 years ago

Thanks John, Just found this solution to a problem I was having.

John Robinson 7 points

5 years ago

Great stuff Andy. Glad it helped. That's what I love about this forum.