YouTube scaling and liquid layout

Question

Hi There!

 

I am trying to export a liquid layout document with a Youtube Video emebeded. The video embeds and plays without any issue however i cant seem to get it to scale correctly. I have set my document to liquid layout scale, but the Youtube video does not scale. Any advise on this one?

 

Thanks in advance for your help!

Answer 1

You can try adding a style attribute to the iframe ( style="width:100%;height:100%;" ), but it may take more than that:
https://css-tricks.com/fluid-width-youtube-videos/

---

Update:

Using the onLoad event to set the height and width as percentages seems to work well. E.g.:
<iframe src="https://www.youtube.com/embed/8ekR-Wid7V0" width="800" height="450" frameborder="0" onLoad="javascript:this.style.width='100%';this.style.height='100%';return false;"></iframe>

Comments

Hi Justin

Thanks so much for your quick reply.Unfortunately I did try defining hight and width as 100%, but this did not work.
I've also tried both the CSS method and JS in the link you provided and I can't seem to get this to work either...With the CSS and JS code am I meant to be attaching this in the resources section of the export? Or should it be embedded in the back end of my webserver?

I tried the CSS method with this attached as a resource:
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

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

And this is what I pasted in the iframe indesign:
<div class="video-container">
    <iframe src="https://www.youtube.com/embed/8ekR-Wid7V0" width="800" height="450" frameborder="0"></iframe>
</div>

i've managed to get embedded media file videos working, but not any youtube/vimeo videos....Any suggestions on where I'm going wrong?
Thanks again!

---

Try using the onLoad event to set the height and width as percentages. I had good luck with this code snippet:
<iframe src="https://www.youtube.com/embed/8ekR-Wid7V0" width="800" height="450" frameborder="0" onLoad="javascript:this.style.width='100%';this.style.height='100%';return false;"></iframe>

---

Amazing, it worked perfectly! Thanks so much really appreciate it!

---

Glad to hear it! I'll add it to the answer above.