CODEWITHSUNDEEP
htmlcssbootstrap-4
Buckyx55
Buckyx55

Reputation: 504

Bootstrap 4 Video Embed Not Working Properly

I followed the documentation and researched other questions but couldn't figure out why it's not working.

Here is the code:

<div class="row">
               <div class="col">
                   <h3 class="text-center text-primary py-3 text-uppercase">Our Twitch Streamers</h3>
                   <div class="embed-responsive">
                       <iframe src="https://player.twitch.tv/?channel=visviresgames" allowfullscreen="true" scrolling="no" height="378" width="620" class="embed-responsive-item"></iframe>
                   </div>
                   <h3 class="text-center text-primary py-3 text-uppercase">Our Youtube Channel</h3>
                   <div class="embed-responsive">
                       <iframe width="560" height="315" src="https://www.youtube.com/embed/k5JqHLbZP_0" allowfullscreen="true" class="embed-responsive-item"></iframe>
                   </div>
               </div>
           </div>
 </div>

Also, you can get a live preview of it not working at: VisViresGaming.com, at the bottom.

Upvotes: 3

Views: 6941

Answers (1)

WebDevBooster
WebDevBooster

Reputation: 14954

The class embed-responsive-16by9 was missing in your code.

Click "run code snippet" below and expand to full page for testing:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col">
            <h3 class="text-center text-primary py-3 text-uppercase">Our Twitch Streamers</h3>
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://player.twitch.tv/?channel=visviresgames" allowfullscreen></iframe>
            </div>
            <h3 class="text-center text-primary py-3 text-uppercase">Our Youtube Channel</h3>
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/k5JqHLbZP_0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

Note: the videos themselves aren't gonna load here because SO doesn't allow third-party iframe embeds but you'll be able to see and verify that it's working as far as responsiveness goes.

Edit:

Just tested on your website (via web dev tools) and adding the embed-responsive-16by9 class (like shown in the code snippet above) definitely fixes the issue there as well.

Upvotes: 2

Related Questions