Firebase embedded youtube videos

[Ashley Gavin]

Hey Guys,

I embedded some youtube videos in my page and they worked locally but don't work online. I tried debugging and realized that I think its because these videos are externally hosted (tried the same thing with externally hosted images). Here's a link to my page to see the problem. Is there a quick fix for this that I don't understand? Tested the local version before I deployed and it does work. 

https://dazzling-fire-4039.firebaseapp.com/

The code for the video section specifically:

  <div id="myCarousel" class="carousel slide">

              <ol class="carousel-indicators">

                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

                <li data-target="#myCarousel" data-slide-to="1"></li>

                <li data-target="#myCarousel" data-slide-to="2"></li>

              </ol>

              <!-- Carousel items -->

              <div class="carousel-inner">

                <div class="active item"><center><iframe width="560" height="315" src="http://www.youtube.com/embed/V-4IKq7t2_E" frameborder="0" allowfullscreen></iframe></center></div>

                <div class="item" tyle="text-align: center;"><center><iframe width="560" height="315" src="http://www.youtube.com/embed/CiSVSQBL6I0" frameborder="0" allowfullscreen></iframe></center></div>

                <div class="item" tyle="text-align: center;"><center><iframe width="560" height="315" src="http://www.youtube.com/embed/mXDaEL1E4U8" frameborder="0" allowfullscreen></iframe></center></div>

              </div>

              <!-- Carousel nav -->

              <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>

              <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

            </div>

    </div>

[Jacob Wenger]

Hey Ashley,

The issue here is that you are trying to loading insecure HTTP content on your HTTPS connection. One of Firebase Hosting's big selling points is that it is HTTPS by default, but this also means that you need to load content via HTTPs on it as well. Looking at console errors from your site, I see several errors about loading insecure content. One if for jQuery, which can easily by solved by using https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js instead of http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js in your script tag. As for your YouTube videos, you should be able to use the same trick: just replace http with https. Give that a try and let me know if you still have any issues.

Pro Tip: if you use //www.example.com/script.js instead of http://www.example.com/script.js or https://www.example.com/script.js, it will smartly use the same HTTP scheme as the page that is serving it. This makes it simple to get your site to run properly on HTTP or HTTPS.

Jacob