rob/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make video embed responsive

Browse source
This commit is contained in:
Robert Marshall 2021-05-27 09:28:54 +01:00
parent e34427ae1f
commit 6c5f36c46a
2 changed files with 14 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Website.Markdig.Extensions/BlogLinkAndImageRenderer.cs
View file

@ -39,7 +39,9 @@ namespace Website.Markdig.Extensions {
private bool RenderEmbed(HtmlRenderer renderer, LinkInline link) { private bool RenderEmbed(HtmlRenderer renderer, LinkInline link) {
if (YoutubeLink.IsMatch(link.Url)) { if (YoutubeLink.IsMatch(link.Url)) {
var youtubeMatch = YoutubeLink.Match(link.Url); var youtubeMatch = YoutubeLink.Match(link.Url);
renderer.Write(@"<div class=""video-container"">");
renderer.Write($"<iframe src=\"https://www.youtube.com/embed/{youtubeMatch.Groups[1].Value}\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"); renderer.Write($"<iframe src=\"https://www.youtube.com/embed/{youtubeMatch.Groups[1].Value}\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>");
renderer.Write(@"</div>");
return true; return true;
} }

14
src/Website/wwwroot/css/blog.scss
View file

@ -170,7 +170,15 @@
} }
} }
iframe[src^="https://www.youtube.com/embed/"] { .video-container {
width: 944px; position: relative;
height: 531px; padding-bottom: 56.25%;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
} }