Fluid-size youtube video embeds

This commit is contained in:
Jonny Barnes 2017-02-06 09:09:36 +00:00
parent c7363bcce2
commit f13cf58294
9 changed files with 22 additions and 4 deletions

View file

@ -8,12 +8,15 @@ let notes = document.querySelectorAll('.e-content');
for (let note of notes) {
let ytid = note.textContent.match(youtubeRegex);
if (ytid) {
let ytcontainer = document.createElement('div');
ytcontainer.classList.add('container');
let ytiframe = document.createElement('iframe');
ytiframe.classList.add('youtube');
ytiframe.setAttribute('src', 'https://www.youtube.com/embed/' + ytid[1]);
ytiframe.setAttribute('frameborder', 0);
ytiframe.setAttribute('allowfullscreen', 'true');
note.appendChild(ytiframe);
ytcontainer.appendChild(ytiframe)
note.appendChild(ytcontainer);
}
let spotifyid = note.textContent.match(spotifyRegex);
if (spotifyid) {

View file

@ -69,3 +69,18 @@ footer button {
margin-top: 0.5em;
font-size: 1rem;
}
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.youtube {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}