A guide to integrating the YouTube player and Facebook API with Bootstrap 3

Hello everyone!

Hey there, I'm Cody, a student and amateur web designer. I recently got the opportunity to work on a website for a family friend.

I've been using bootstrap3 to ensure the site is responsive, but I've run into an issue while trying to embed both the youtube player API and the facebook page API on the homepage of the website.

The col-8 section is designated as the main content area, while the col-4 serves as a sidebar/sharing section.

While the youtube player loads correctly, the col-4 and content thereafter do not display. Strangely enough, when I disable the youtube player, the page loads perfectly fine.

If anyone can assist me in troubleshooting this issue, I would greatly appreciate it!

<body>
<div class="container row">
    <div class="col-sm-8">.col-sm-8
        <h3>What is Roger's Lake of the Woods Adventures?</h3>
        <p>testing testing</p>
        <!-- Youtube Player API Placement -->
        <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item"
        id="ytplayer" 
        type="text/html" 
        src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=0&origin=http://lakeofthewoodsadventures.com" 
        />
        </div>
        <!-- End of Youtube Player API Placement -->
    </div>
    <div class="darkBG col-sm-4">
    <!-- Facebook Page Feed API Placement -->
        <div class="fb-page" data-href="https://www.facebook.com/pages/Rogers-Lake-of-the-Woods-Adventures/597978003639919" 
        data-width="280" 
        data-hide-cover="true" 
        data-show-facepile="false" 
        data-show-posts="true">
        <div class="fb-xfbml-parse-ignore">
        <blockquote cite="https://www.facebook.com/pages/Rogers-Lake-of-the-Woods-Adventures/597978003639919">
        <a href="https://www.facebook.com/pages/Rogers-Lake-of-the-Woods-Adventures/597978003639919">
        Roger&#039;s Lake of the Woods Adventures
        </a>
        </blockquote>
        </div>
        </div>
    <!-- End of Facebook Page Feed API Placement -->
    </div>
</div>
<script src="Local Bootstrap/js/bootstrap.min.js"></script>
</body>

Any assistance or insights are much appreciated! - Cody

htmlcssfacebookyoutubeembed

Answer №1

<iframe src="">insert YouTube code here</iframe>

Remember to properly open and close the iframe tag.

Answer №2

consider inserting a </iframe> tag to enhance your content.

<iframe class="embed-responsive-item"
        id="ytplayer" 
        type="text/html" 
        src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=0&origin=http://lakeofthewoodsadventures.com" 
        ></iframe>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Differences Between Mobile and Desktop Browser Media Queries

As I work on creating a responsive website, I have come across various examples of sites that adapt well to both desktop and mobile browsers. Currently, my stylesheet setup includes different media queries for various screen sizes. However, I've notic ...

cssresponsive-designmedia-queries

conceal the bootstrap navigation bar while the page is being

Struggling to toggle a Bootstrap navbar on scroll? Need some guidance from the pros out there. I admit, my Bootstrap and jQuery skills are pretty basic. The browser console doesn't throw any errors, and I've experimented with fadeIn, fadeOut, add ...

javascriptjqueryhtmlcsstwitter-bootstrap

Chrome reports a Javascript error: indicating that it is not recognizing the function

When working with a js file and html, I encountered an issue where one function works fine but another prompts an error in Chrome: Uncaught TypeError: specification_existing is not a function I'm puzzled as to why one function works while the othe ...

javascriptjqueryhtmlflask

What is the best way to maintain the CSS3 animation state following ng-animate?

Attempting to alter the state of a div using ng-animate along with CSS3 transitions. The animations are functioning well with this particular CSS, except for the issue where the div loses its size and color once the animation is completed. .fade-hide, .f ...

cssangularjsng-animate

There is currently no graph being shown

I've run this code but I'm not getting any output. There are no errors showing up, but I can't seem to figure out what's wrong. Can someone help me identify the issue? Thanks! <!DOCTYPE html> <html> <head> <m ...

htmlangularjsplotgraph

Error encountered in Django when attempting to pass an SQL query due to an UnboundLocalError

When I encountered an issue: Environment: Request Method: POST Request URL: http://127.0.0.1:8000/mainpage.html Django Version: 3.2.12 Python Version: 3.7.4 Installed Applications: ['django.contrib.admin', 'django.contrib.auth' ...

htmldjangoweb-deployment

OrbitControls in THREE.JS fail to function properly when a DOM Element is layered on top of the scene

I am attempting to position labels as elements with position:absolute; over a THREEJS scene. The issue arises when the mouse hovers over one of the labels (the red box in the example below), causing the events that trigger OrbitControls to be "halted" by t ...

javascriptcsseventsthree.js

Why is this basic HTML code not functioning as expected?

I attempted to combine HTML and JS to change the color of a box upon clicking it, but after reviewing the code multiple times, I am unable to pinpoint the issue. <!doctype html> <html> <head> </head> <body> <d ...

javascripthtml

Error: The $routeProvider is malfunctioning when the $location service is injected

Currently, I am developing a website using angularjs. This website consists of 1 module with different controllers for each tab. The issue I am facing is that the code block below works perfectly fine as it directs the user to the login page and initiates ...

javascripthtmlangularjs

How can you gather user data on a website without relying on a database and making it voluntary?

In order to streamline the process, the user should be able to send a preformatted email with the click of a button or have their data stored securely without leaving the site. The goal is to avoid the extra step of using a mailto: link, unless the email c ...

javascripthtmlcssweb

CSS DROP DOWN NAVIGATION MENU - Struggling to maintain hover effect on main menu item while navigating through sub-menu

I am facing a challenge with a CSS-only drop-down menu where the top main menu item loses its highlight when I move the cursor over the sub-menu items. You can view the menu in action here: . For example, if you hover over "Kids" and then move your cursor ...

css

Setting the appropriate width for the main div element using CSS

Imagine wanting to craft an HTML page featuring a primary div housing all of the content. In this scenario, the div should enclose other divs and remain centrally fixed on the page, similar to the image provided. How should one determine the appropriate w ...

csshtml

How can I effectively update Bootstrap 4 in a Rails environment?

After attempting to update my Rails 5 project from Bootstrap 4 Alpha 6 to the final version 4.0.0, I confirmed that the v4.0.0 gem was installed (with the alpha version gem uninstalled). However, upon running my project in development mode, I discovered th ...

cssruby-on-railstwitter-bootstrapruby-on-rails-5twitter-bootstrap-4

What is the best way to connect two buttons in separate divs?

I'm facing a challenge of adding two buttons side by side when they are located in different div elements. I've tried using the float property in the btn-group, but it interferes with the functionality of the dropdown and affects the animation. H ...

javascriptjqueryhtmlcss

Tips for creating a hidden tab that only appears when hovered over

When hovering over the link tag .cat-link a.navlink, each subcategory tab .subcategories div is displayed. However, I would like to hide all tabs initially and have them appear only when hovered over with the mouse. Once the mouse is removed, I want the t ...

javascriptjqueryhtmlcss

Is a table cell's border considered as part of its content?

A discrepancy is observed in the rendering of a document on Firefox and Chrome browsers: <!DOCTYPE html> <html> <head> <title>Testing table rendering</title> <style> table { ...

htmlcssgoogle-chromefirefox

Incorporating a scrollbar when a div exceeds the bottom of the viewport

I am encountering an issue on my webpage with a <div> that contains a <table> with rows of varying heights: <html> <head></head> <body> <div> <table> <tr>... <tr>... ... </ ...

cssscrollbarhtml

Using Google Tag Manager to target specific elements within the preferred element

I am attempting to trigger a tag based on the ID of an element. Within the HTML, there is a card containing various elements. The outermost parent div contains the ID that I want to track using GTM. However, when I click on the element in the GTM Preview, ...

htmlgoogle-tag-manager

Removing the new line using v-if in Vue.js

I want to insert a v-if in the middle of a sentence without creating a new line. This is what I desire: A / B / C / D However, my current output is: A / B / C / D This is the code I am using: <div> {{ A }} / {{ B }} <p v-if="functi ...

htmlvue.jsvuejs3

Obtaining material for optimizing a dynamic image

I'm facing a challenge with my responsive image setup. The image is filling the top half of the screen as intended, but I can't seem to get the content underneath it to stay below the image as it resizes. Instead, the content ends up overlapping ...

htmlcssresponsive-design