🐛 Fixed amp-youtube being too small (#15826)

closes https://github.com/TryGhost/Ghost/issues/14020

- Added CSS for `amp-youtube` to set the dimensions of the iframe instead of passing explicit height and width
attributes.
- Instead we set the video width to the viewport width and then set the height to a standard 16:9 ratio of YouTube videos.
This commit is contained in:
Jacob Simon 2022-11-15 05:09:31 -08:00 committed by GitHub
parent cdccf5c46a
commit ced1fdbdd4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 1 deletions

View File

@ -108,7 +108,7 @@ allowedAMPAttributes = {
'amp-audio': ['src', 'width', 'height', 'autoplay', 'loop', 'muted', 'controls'],
'amp-iframe': ['src', 'srcdoc', 'width', 'height', 'layout', 'frameborder', 'allowfullscreen', 'allowtransparency',
'sandbox', 'referrerpolicy'],
'amp-youtube': ['src', 'width', 'height', 'layout', 'frameborder', 'autoplay', 'loop', 'data-videoid', 'data-live-channelid']
'amp-youtube': ['src', 'layout', 'frameborder', 'autoplay', 'loop', 'data-videoid', 'data-live-channelid']
};
function getAmperizeHTML(html, post) {

View File

@ -182,6 +182,11 @@
amp-img img {
object-fit: cover;
}
amp-youtube {
height: calc(100vw / 1.78);
width: 100vw;
}
.page-header {
padding: 50px 5vmin 30px;