Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Framework Basics Build a Website with Bootstrap Adding the Video Modal and Footer

Kevin Murphy
Kevin Murphy
24,380 Points

Bootstrap CSS recompiled - Video modal won't work with initial build.

I wanted to highlight for anyone that has similar issue - The bootstrap CSS files from the initial project customization do not include the CSS for modal components. This is odd because GH checks the box for modals in the customization video.

Guil Hernandez or mod - some type of note should be made about this. I spent over an hour on this before circling back on potential for recompiled BS CSS being root cause. Thanks.

5 Answers

Kevin Murphy
Kevin Murphy
24,380 Points

Yeah that makes sense though because the stage/module prior is for prototyping and use the full blown bootstrap - all bells and whistles. The customizing bootstrap stage is for a streamlined version to be used exclusively for the Ribbit Site project.

What's interesting to me (and where I believe a note would be helpful) is that in the stage-1 (i.e. zip file named 3-2) video GH clicks on "modal" when assigning the components for his build yet as we've learned that BS build does not include CSS for modals

Jason Mc Dermott
Jason Mc Dermott
11,496 Points

For a nube such as myself having to download a new set of files for each stage of the lesson can be quite cumbersome and get a little confusing if you let it. Some for warning would be handy but I suppose one could just do the stream lining bit for themselves at the outset and it be featured at the start of the lessons, somewhat like being told whats to come and what ingredients you'll need for the project ahead. Plus rather than use a whole new set up files for each stage can't css snippets be included much like HTML one's are when need be at each stage. Right now at this stage looking down through the modul stuff in the BS CSS I'm a little overwhelmed at what to use? .modul .fade is a hint rightaway. I think I'll suggest what I've said here as feedback for the course, Its a great site so far as besides.

I created a separate js file then linked that to the html page the code below stopped the video when I toggled the modal button and the modal background.

/*Function built to take on search for youtube video in modal*/
function ytplayer() {
    $('#videoModal iframe').attr("src", $("#videoModal iframe").attr(
        "src"));
}  
/*Function shuts down video when dismiss button is toggled*/
$('.close').click(function() {
    $('#videoModal').hide();
    ytplayer();
});

/*Function shuts down video when modal background is toggled*/
$('#videoModal').on('hidden.bs.modal', function() {
    ytplayer();
});

Curious if you could quickly explain how this works, Elijah. What is causing the video to stop?

James Barnett
James Barnett
39,199 Points

I haven't worked through this project yet, so you'll have to walk me through this.

  • I went to the Add the Video Modal video
  • clicked download project files
  • opened up the zip and went into the start directory and then the css directory
  • went to bootstrap.css
  • searched for modal and found several lines of CSS that reference it.

What am I missing?

Kevin Murphy
Kevin Murphy
24,380 Points

Thanks James for working through those steps. My concern may be related more to process. My experience overall has been when you are working through a project with the teacher in TH courses you can start with the initial files (i.e. stage-1) and build from there (unless explicitly informed to update your files with latest project downloads due to one reason or another).

My concern/issue is that in this course if you do that you will end up with major disconnects in your code vs the teacher's. There are large chunks of CSS (non-BS) that are added in the later stages not discussed in the video (the prior stage to the video modal hung me up for awhile until I recognized this). When you arrive to the video modal stage, if you do not update the project files the BS CSS won't have any reference to modal. It was tricky to debug this as I thought that it was due to JQ/JS or markup - not styling...

Make sense?...

James Barnett
James Barnett
39,199 Points

The first stage I could find project files for is building a header navigation and jumbotron component.

So I then ...

  • clicked download project files
  • opened up the zip and went into the start directory and then the css directory
  • went to bootstrap.css
  • searched for modal and found several lines of CSS that reference it.

Not sure what I'm doing differently than you.

Kevin Murphy
Kevin Murphy
24,380 Points

** UPDATE: Actually the first stage in this module is this one customizing bootstrap **

(I originally had thought I followed same steps as you - the referenced update is an edit and original comment was deleted)

James Barnett
James Barnett
39,199 Points

What' interesting about this is previous stage has the correct files

  • If you go to Prototyping with Bootstrap stage
  • There's a downloading bootstrap video
  • The next video building a header navigation and jumbotron component that stage has the correct download files

tl;dr 2-3.zip, works 3-2.zip doesn't work, 3-11.zip works

Jason Mc Dermott
Jason Mc Dermott
11,496 Points

Actually, it just came to me..maybe start at an initial stage and just add the latest BS CSS as you go to your CSS folder.

**UPDATE: I've tried replace the BS CSS from this lesson's files to the one's I'm using from an earlier stage of the course aswell as using the files on hand with this lesson. So for both I went through the lesson added the modal stuff and tested them in a browser, neither will work for me!?.....TH you guys rock but a rambling I must go to solve this, that and the problem I had with adding the iOS and Android icons. Any feed back would be appreciated, thanks.