Skip to content

Commit

Permalink
Add object-fit=contain to amp-youtube placeholder image
Browse files Browse the repository at this point in the history
  • Loading branch information
@westonruter
westonruter committed Nov 10, 2019
1 parent 97e8db5 commit fc0e9e0
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 10 deletions.
5 changes: 3 additions & 2 deletions includes/embeds/class-amp-youtube-embed-handler.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,9 @@ private function parse_props( $html, $url, $video_id ) {
}

$img_attributes = [
'src' => esc_url_raw( sprintf( 'https://i.ytimg.com/vi/%s/hqdefault.jpg', $video_id ) ),
'data-amp-layout' => 'fill',
'src' => esc_url_raw( sprintf( 'https://i.ytimg.com/vi/%s/hqdefault.jpg', $video_id ) ),
'layout' => 'fill',
'object-fit' => 'cover',
];
if ( ! empty( $props['title'] ) ) {
$img_attributes['alt'] = $props['title'];
Expand Down
16 changes: 8 additions & 8 deletions tests/php/test-class-amp-youtube-embed-handler.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,20 +133,20 @@ public function get_conversion_data() {

'url_simple' => [
'https://www.youtube.com/watch?v=kfVsfOSbJY0' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270" title="Rebecca Black - Friday"><a placeholder href="https://www.youtube.com/watch?v=kfVsfOSbJY0"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" data-amp-layout="fill" alt="Rebecca Black - Friday"></img></a></amp-youtube></p>' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270"><a placeholder href="https://www.youtube.com/watch?v=kfVsfOSbJY0"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" alt data-amp-layout="fill"></img></a></amp-youtube></p>' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270" title="Rebecca Black - Friday"><a placeholder href="https://www.youtube.com/watch?v=kfVsfOSbJY0"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" layout="fill" object-fit="cover" alt="Rebecca Black - Friday"></img></a></amp-youtube></p>' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270"><a placeholder href="https://www.youtube.com/watch?v=kfVsfOSbJY0"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" alt layout="fill" object-fit="cover"></img></a></amp-youtube></p>' . PHP_EOL,
],

'url_short' => [
'https://youtu.be/kfVsfOSbJY0' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270" title="Rebecca Black - Friday"><a placeholder href="https://youtu.be/kfVsfOSbJY0"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" data-amp-layout="fill" alt="Rebecca Black - Friday"></img></a></amp-youtube></p>' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270"><a placeholder href="https://youtu.be/kfVsfOSbJY0"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" alt data-amp-layout="fill"></img></a></amp-youtube></p>' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270" title="Rebecca Black - Friday"><a placeholder href="https://youtu.be/kfVsfOSbJY0"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" layout="fill" object-fit="cover" alt="Rebecca Black - Friday"></img></a></amp-youtube></p>' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270"><a placeholder href="https://youtu.be/kfVsfOSbJY0"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" alt layout="fill" object-fit="cover"></img></a></amp-youtube></p>' . PHP_EOL,
],

'url_with_querystring' => [
'http://www.youtube.com/watch?v=kfVsfOSbJY0&hl=en&fs=1&w=425&h=349' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270" title="Rebecca Black - Friday"><a placeholder href="http://www.youtube.com/watch?v=kfVsfOSbJY0&amp;hl=en&amp;fs=1&amp;w=425&amp;h=349"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" data-amp-layout="fill" alt="Rebecca Black - Friday"></img></a></amp-youtube></p>' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270"><a placeholder href="http://www.youtube.com/watch?v=kfVsfOSbJY0&amp;hl=en&amp;fs=1&amp;w=425&amp;h=349"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" alt data-amp-layout="fill"></img></a></amp-youtube></p>' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270" title="Rebecca Black - Friday"><a placeholder href="http://www.youtube.com/watch?v=kfVsfOSbJY0&amp;hl=en&amp;fs=1&amp;w=425&amp;h=349"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" layout="fill" object-fit="cover" alt="Rebecca Black - Friday"></img></a></amp-youtube></p>' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270"><a placeholder href="http://www.youtube.com/watch?v=kfVsfOSbJY0&amp;hl=en&amp;fs=1&amp;w=425&amp;h=349"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" alt layout="fill" object-fit="cover"></img></a></amp-youtube></p>' . PHP_EOL,
],

// Several reports of invalid URLs that have multiple `?` in the URL.
Expand All @@ -162,8 +162,8 @@ public function get_conversion_data() {

'embed_url' => [
'https://www.youtube.com/embed/kfVsfOSbJY0' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270" title="Rebecca Black - Friday"><a placeholder href="https://youtube.com/watch?v=kfVsfOSbJY0"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" data-amp-layout="fill" alt="Rebecca Black - Friday"></img></a></amp-youtube></p>' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270"><a placeholder href="https://youtube.com/watch?v=kfVsfOSbJY0"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" alt data-amp-layout="fill"></img></a></amp-youtube></p>' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270" title="Rebecca Black - Friday"><a placeholder href="https://youtube.com/watch?v=kfVsfOSbJY0"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" layout="fill" object-fit="cover" alt="Rebecca Black - Friday"></img></a></amp-youtube></p>' . PHP_EOL,
'<p><amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270"><a placeholder href="https://youtube.com/watch?v=kfVsfOSbJY0"><img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" alt layout="fill" object-fit="cover"></img></a></amp-youtube></p>' . PHP_EOL,
],
];
}
Expand Down

0 comments on commit fc0e9e0

Please sign in to comment.