Strange YouTube embed coding question
- Started
- Last post
- 22 Responses
- CygnusZero4
So I have to make a YT vid that is in 3:4 aspect ratio, and will be embedded into a page with the dimensions of 600x800. I did a test of all this and it works/displays perfectly.
But I want to also try and have this scale up depending on the size of their screen. I found the below code, which works fine, except that it's only set up for 16:9 vids. Anyone know how to correctly modify this to reflect 3:4?
.video-container {
position:relative;
padding-bottom:56.25%; (9 divided by 16)
padding-top:30px;
height:0;
overflow:hidden;
}.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
- monNom0
That 9 divided by 16 part should give you a clue. Try 75% or 133% if portrait format.
The video container uses % padding to set the height in proportion to the width.
- you can make the .video-container narrower to effect the overall video scale, Try width:75%; in the .video-container class. You'll have to tinker with it.monNom
- CygnusZero40
When I tried 133% it makes the video quite a bit taller than the browser, so that didnt work.
- ESKEMA0
fitvid.js
Just scale the width of the container and it will scale the video up correctly.
- CygnusZero4-1
^ I have no idea what to do with this. Im not a developer.
- CygnusZero4-1
Im not a developer. When he says target your container, dunno what that means guys. Im not a developer.
- So, are you a developer?drgs
- Im not a developer.CygnusZero4
- ESKEMA0
Do you have access to the site? What are you trying to achieve? Are you trying to control how a YouTube video embeds on a site you do not own?
- CygnusZero40
I have access to do whatever I want on this site that this video is being embedded on. This is what I have using this fitvid thing, and not surprisingly, it doesnt work.
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#video-container").fitVids();
});
</script>
</head><body>
<div id="video-container">
<iframe width="600" height="800" src="https://www.youtube.com/embed/JHVr0rhUgnw?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
- ESKEMA0
You download the file fitvid.js and upload it to the server, or just use a cdn version:
https://cdnjs.cloudflare.com/aja…You paste that line into your HTML, you also need to have jquery running before it. If you don't have jquery already paste this before the fitvid line:
https://cdnjs.cloudflare.com/aja…Then you need to initialize it all.
This is what it should look like:
https://cdnjs.cloudflare.com/aja…
https://cdnjs.cloudflare.com/aja…
<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$(".thing-with-videos").fitVids...
});
</script>I recommend taking the JavaScript to another file and load it by its src but that way will work just fine if you don't understand what I'm saying.
- Damn, screwed up on the script sources, of course they should be inside <script src="path/to/jquery.min.js"></script>ESKEMA
- Its fine I literally didnt understand any of this anyway. Im just going to keep it as is without any of this scaling.CygnusZero4
- CygnusZero40
Seriously still talking to me like im a developer. Do you think I know what a CDN is??
Youre sending me links to thinks that look like jibberish. None of this makes any sense. Im just going to stick with it not scaling, its fine the way it is. Ty though.
- ESKEMA0
A cdn is just a repository for scripts. You can use them instead of hosting them yourself. It has the added benefit of already being cached by the user browser because since lots of sites use the same cdn, chances are a user already browsed a page that included jquery or whatever script from the same cdn, so it's already cached and will load quicker. The downside is you don't control the source, but they're pretty reliable so it doesn't really matter much.
You need to control the width of your container via CSS.
Something like :
#video-container{
max-width: 800px
}
- ESKEMA0
If you gave the container name as an id
<div id="video-container">Then the CSS for targeting it and the JavaScript code should :
#video-containerIf you named it as a class (which I recommend) like this:
<div class="video-container">Then you use a class selector instead:
.video-container
- CygnusZero40
^It doesnt work. I already posted my code where I had this container and the id name. Doesnt do any scaling.
- ESKEMA1
It doesn't work because you don't know what you're doing and apparently don't give a fuck to learn how to do it either. I'm trying to help but it seams you don't want it. If you want me to make it work for you, I will try my best. If you don't care, I won't either.
- CygnusZero40
Im looking for a simple solution. What I posted in my first post was VERY close to working, just need to adjust the numbers and its good to go. Thats what I was looking for help with, not this alternative overly complex version with all kinds of files and shit. This is WAY outside of what I was looking for. Ill never get this to work. The first thing I had was close to working.
- detritus-1
Quit.
- Still waiting for someone to help with my original post. Hasnt happened yet.CygnusZero4
- How about you learn your profession rather than lashing out at other people because you can't understand their answers? You have no right to be a dick here.detritus
- lulzpockets
- ESKEMA1
If it was as easy as a few lines of CSS, there would be no need for that script. But the script is the easiest way and it's fucking basic to implement. If you can't manage that or are unwilling to learn, then get out of what you're trying to do now. It doesn't make sense to want to do it without learning how to do it properly. It's not complex, you're the one making it difficult by not even trying to understand it.
- Welp, those few lines of CSS ARE WORKING, just not perfectly, genius.CygnusZero4
- Sounds like you found the most complex way to do this and think its the only way. Clearly it isnt.CygnusZero4
- CygnusZero4-4
^ Because you are incapable of explaining things in a simple manner. Everyone has had that teacher who is a robot and explains everything in the most complex, vague way as possible, leaving out details, and assumes everyone he is talking to is an expert. Who says "CDN" to someone who has said multiple times they are not a developer? That told me immediately what I assumed, that youre that overly complex teacher guy that doesnt actually know how to teach.
Explain it in VERY BASIC TERMS, detailing what to do very simply, do this, then do that, or dont help, because youre not helping at all. Youre running me in circles and wasting my time.
- Simpler terms? You're trying to make a video embed resize with ratio. I explained the simplest I could without having to teach you three languages.ESKEMA
- ESKEMA0
how is the video container named? paste here the code you have.
do you have a link I can look at?
- Cosmodrome1
.video-container {
position: relative;
width:100%;
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
- ESKEMA0
I made it work:
http://balas.pt/stuff/video-cont…here's the code:
http://pastebin.com/xFdaRJkyjust copy and paste the parts between the comments
- You are way too nice ESKEMA.monNom
- way too nice, i saw this was from cygnus and didn't bother. and you are 100% right, fitvid is of course the best way to do this.kingsteven