voussoir/ycdl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Let embedded video fit width of the video card instead of hard px.

Browse source 
This makes the page much easier to use on mobile. On desktop I think
the new size may be a little overwhelming but I'll try getting used
to it, and anyway I think it simply makes more sense than the
arbitrary size from earlier.
This commit is contained in:
voussoir 2020-04-03 08:43:47 -07:00
parent 275db1e608
commit 1b456bf900
1 changed files with 22 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
frontends/ycdl_flask/templates/channel.html
View file

@ -67,6 +67,26 @@
display: none; display: none;
flex-direction: column; flex-direction: column;
} }
/*
Thank you SimonSimCity
https://stackoverflow.com/a/35153397
*/
.video_iframe_holder
{
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video_iframe_holder iframe
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style> </style>
</head> </head>
@ -202,10 +222,10 @@ function toggle_embed_video(video_id)
var video_card = document.getElementById("video_card_" + video_id); var video_card = document.getElementById("video_card_" + video_id);
var show_button = video_card.getElementsByClassName("show_embed_button")[0]; var show_button = video_card.getElementsByClassName("show_embed_button")[0];
var hide_button = video_card.getElementsByClassName("hide_embed_button")[0]; var hide_button = video_card.getElementsByClassName("hide_embed_button")[0];
var embeds = video_card.getElementsByTagName("iframe"); var embeds = video_card.getElementsByClassName("video_iframe_holder");
if (embeds.length == 0) if (embeds.length == 0)
{ {
var html = `<iframe width="711" height="400" src="https://www.youtube.com/embed/${video_id}" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>` var html = `<div class="video_iframe_holder"><iframe width="711" height="400" src="https://www.youtube.com/embed/${video_id}" frameborder="0" allow="encrypted-media" allowfullscreen></iframe></div>`
var embed = html_to_element(html); var embed = html_to_element(html);
video_card.appendChild(embed); video_card.appendChild(embed);
show_button.classList.add("hidden"); show_button.classList.add("hidden");