I need help with FitVids.js

[CATV47]

I can’t seem to get the FitVids.js to work. Admittedly, I don’t have a clue what I am doing. Any help, (spoon feeding) would be appreciated. I don’t know anything about CSS or HTML. I am using a Weebly.com template and I need to make my videos fit when the window or website is resized for a mobile phone or on a users screen.

FitVids.js

[TheDoc]

First, you need to make sure your website is loading jQuery since FitVids requires that to run. Once you can confirm that you have jQuery loaded (quite likely) you’ll need to put this just before your closing </body> tag:

<script src="path/to/jquery.fitvids.js"></script>
<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

You’ll need to change two things:

1. The path to jquery.fitvids.js. You’ll need to upload that JS file to somewhere on your Weebly server. I’m not sure if this is possible as I’ve never used Weebly. You can download jquery.fitvids.js from the Github repo you linked to by clicking on the download button in the right sidebar:
2. #thing-with-videos needs to change to whatever the container is on your theme. If you don’t know any HTML or CSS you’ll likely need to post a link to your site to have someone here point it out for you.

[CATV47]

Ok, I clearly don’t know how to make this work,

I have installed the FitVids.js and I am pretty sure I have js.query. But I am using the Weebly website editor to work in, and I am clueless about html and css.
the link to my website… is http://www.catv47.com

My videos just don’t resize properly when viewed on an iPhone. If someone could help me with this I would greatly appreciate it.

[TheDoc]

You haven’t included the FitVids file anywhere that I can see on the live website.

Furthermore, FitVids is meant for fluid websites that resize. Your site is fixed-width, meaning the videos don’t need to be resized at all because the container is always the same width.

If you’re having problems when viewing on a phone, you might want to try adding this bit of CSS:

iframe {
    max-width: 100%;
}

[CATV47]

Where do I add that CSS? I tried adding it where I thought it might go, like under the /* main content styles

content {

float: right;
width: 600px;
min-height: 350px;
padding: 0 0 20px;
iframe {
max-width: 100%;

but it doesn’t seem to work here.
where else would it go?

[Author]

Posts