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

General Discussion

Atiba Boswell
Atiba Boswell
9,960 Points
Posted by Atiba Boswell
Atiba Boswell
9,960 Points

Video not found - Help with Bootstrap Framework

This is my first try at creating a website with Bootstrap. I am using the Framework Basics Course by Guil Hernandez as my example.

I want to add a youtube video in the Jumbotron. I can see where the video would go and it is responsive, but I can't play the video and it says "the file or directory can not be found"

Any help is appreciated, my code is below

<!DOCTYPE html>
<html>
  <head>
    <title>Atiba Yoga</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
        <header class="page-header">
            <ul class="nav nav-pills pull-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About Atiba Yoga</a></li>
                <li><a href="#">Practice</a></li>
            </ul>
            <h3>Atiba Yoga</h3>
        </header>   
        <div class="jumbotron"> 
            <h1>Today's Practice</h1>

              <div id="featured-video">
<iframe width="560" height="315" src="//www.youtube.com/embed/42GQqftRmeY" frameborder="0" allowfullscreen></iframe>
              </div> 

            <p class="lead">Welcome to Atiba Yoga. Yoga so important we refuse to put a price it. If it's your first time, check out the beginner videos.</p> 
            <p class="btn-group">
                <a class="btn btn-success btn-lg" href="#" >Beginner Videos</a>
                <a class="btn btn-default btn-lg" href="#">Pricing</a>
            </p>
        </div><!--end of jumbotron div-->       


        <div class="row"><!--start of row div-->    
            <div class="col-sm-4">
                <h2>Delete photo &amp; video based on a timer</h2>
                <p>Learn how to write the code that downloads and displays messages, photos, and videos that timeout after a few seconds. Then create the code that deletes them from the back-end to make them "self destruct."</p>
              </div>

              <div class="col-sm-4">
                <h2>Build an easily managed friends list</h2>
                <p>Learn what Parse.com offers as a "backend-as-a-service" platform. Explore the user account management APIs provided by Parse.com and write the code to create and save a new user in a Parse.com data store.</p>
             </div>

              <div class="col-sm-4">
                <h2>Store &amp; retrieve data using cloud servers</h2>
                <p>We'll teach you how to upload images, video files, and messages to Parse.com's cloud servers. Then learn how to retrieve the data by setting up custom queries that download and display them in the app.</p>
            </div>


        </div><!--end of Grid div-->    

        <div>
            <p>&copy; 2012 Atiba Yoga</p>
        </div><!--end of Copyright div-->   
    </div>      

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.fitvids.js"></script>
    <script>
      $(document).ready(function(){
        // Target your .container, .wrapper, .post, etc.
        $("#featured-video").fitVids();
      });
    </script>   
  </body>
</html>

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I'm going to take a guess here you are trying to embed a YouTube video in an html file on your computer that doesn't a web server.

If that's the case ...

Protocol-less URLs don't work without a web server, so in that case just add http: in front of the URL.

> The main caveat to keep in mind when using the protocol-less reference is that it will fail on pages loaded via file:/// (i.e. HTML pages you load directly from disk to your browser). So, do be sure to include the http: protocol in the URL if you happen to be developing without a web server at all, but don’t worry about omitting it otherwise.

source: http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

Atiba Boswell
Atiba Boswell
9,960 Points
Atiba Boswell
Atiba Boswell
9,960 Points

Yup that did it. I had a feeling it was something that small/easy. Thanks for the help James.