Scaling correctly an embedded video in Muse

Explorer ,
Sep 07, 2018 Sep 07, 2018

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. 

Views

375

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Sep 08, 2018 Sep 08, 2018
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>

Likes

Translate

Translate
LEGEND ,
Sep 08, 2018 Sep 08, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 08, 2018 Sep 08, 2018

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 08, 2018 Sep 08, 2018

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>

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 10, 2018 Sep 10, 2018

Copy link to clipboard

Copied

LATEST

That's superb forum posting Nancy. I'm greatly appreciative. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines