I've been working on making this video embed responsive, and I've got it working for tablets. Now, my next challenge is optimizing it for phones and handling browser window resizing dynamically.
Here's the desired layout: https://i.sstatic.net/XdOW3.jpg
And here's how it currently looks when resized: https://i.sstatic.net/rkiC8.jpg
The title "Overworld Roleplay" shifts position automatically, but the video doesn't. Also, when I resize the window, the text "Last Update:" changes position while the video's size changes, which is not the intended behavior :/
However, everything works fine on larger resolutions. https://i.sstatic.net/ZUOIg.jpg
Even though I use Bootstrap, I am unsure how to address this issue :/
Below is my code:
<!DOCTYPE html>
<html lang="en">
<head>
... (omitted for brevity)
</head>
<body>
... (omitted for brevity)
</body>
</html>
body {
padding-top: 50px;
}
... (omitted for brevity)
@media only screen and (min-width:321px) and (max-width:768px) {
... (omitted for brevity)
}
@media only screen and (min-width:768px) and (max-width:1024px) {
... (omitted for brevity)
}
As you can see, I have added two @media queries at the bottom to cater to tablet and phone sizes.
I've made some modifications:
.vid {
... (omitted for brevity)
}
.vid iframe {
... (omitted for brevity)
}
However, I am now facing difficulties in resizing it properly: https://i.sstatic.net/IpLbY.jpg