Copy link to clipboard
Copied
I have pasted my video into a page but it's only possible for it to scale in the width. In the resize tab the option of Responsive Width and Height is greyed out and it only had Responsive Width. When you scale down the page it instantly squashes it out of proportion.
Add some custom CSS to your <head> tag.
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
]
</style>
Wrap your embed code inside a videoWrapper div.
<div class="videoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/4uNgPaXY6Tc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
Copy link to clipboard
Copied
If you use the video widgets, proportional scaling is possible.
If you use an iframe or embedded HTML, the code of these elements has to supply proportional scaling.
Copy link to clipboard
Copied
I have now downloaded a video widget but I'd rather just embed it. Pretty much what I thought as per the code of these elements has to supply proportional scaling.
I'm just not sure exactly how to do this. Here's my embed code
<iframe width="560" height="315" src="https://www.youtube.com/embed/4uNgPaXY6Tc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Can you or anybody else suggest how to edit it?
Copy link to clipboard
Copied
Add some custom CSS to your <head> tag.
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
]
</style>
Wrap your embed code inside a videoWrapper div.
<div class="videoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/4uNgPaXY6Tc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
Copy link to clipboard
Copied
That's superb forum posting Nancy. I'm greatly appreciative.