I've been having a lot of fun customizing my profile with a new design that I'm really happy with! But the chefs kiss would be to have my video player at the top as shown in the bottom image. Any idea on how to make this work, if its possible?
Current:
What I'm trying to do:
posted
There's a(!) way of going about this, but whether or not it's good is a different matter entirely. The CSS-only restriction makes things a fair bit iffier than necessary. Regardless, you could try the following:
Forum:
Report Topic
position: absolute; on the video player's <iframe>, either inline or with a new ID/class in your <style> - the latter's preferable;top: 220px; or thereabouts;padding-top on main .right so that the player and the blog entries don't overlap.All said and done, the final product should look like this:
<iframe id="vPlayer" width="452" height="300" (etc. etc.)>
<style>
#vPlayer {
position: absolute;
top: 220px;
}
main .right { padding-top: 310px; }
</style>
The upside; if viewed "properly" (i.e. in a browser window that's aboooout 800 pixels wide), this'll be pretty much spot-on with what you're looking for. The downside; anything lower than that, and it's exceptionally prone to breaking. Beneath 480px, it'll just start to hover menacingly way above its intended resting position, which (by extension) almost certainly means it's gonna be borked on mobile. Does the pro outweigh the cons? That's up to you. It might be a safer bet to just convert the video into a .gif and then use that on a .blog-preview:before declaration (like the banner thing you've got on main:before), if only because that method's not relying on position, but /shrug.
posted
Thank you for this!! I am having a little problem though. Mixing the code with the youtube embed has created the space for it, but the video player isnt moving to the top. I'll admit I'm not the best with code, I'm only no just learning it so I'm not sure what I'm doing wrong.
posted
All good! At a brief glance; you seem to've declared title="vPlayer" in the <iframe>, not id="vPlayer" - the former is an unrelated info attribute. Changing it to id= should fix it up.
(Also, I forgot to account for the 'edit your profile' box; set that padding-top on main .right to 320px instead, just in case.)
posted
