0

I have the below code for responsive YouTube video but it does not display at all. When I remove the classes, the video displays but its width is very short. Here is the site that hosts it.

<div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="<?php echo get_field( "youtube_video" );?>" frameborder="0" allowfullscreen></iframe>
                <div class="more-videos">
                    <button type="button" class="btn btn-warning">View More Videos From Matt</button>
                </div>
</div>

HTML as displayed on the site,

<div class="row">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="http://www.youtube.com/v/lQ2EZdkLCfc&version=3&loop=1&playlist=gq_zxxutiok,GEuouxgqa3Q,iwiXhnjlRuw" frameborder="0" allowfullscreen></iframe>
                <div class="more-videos">
                    <button type="button" class="btn btn-warning">View More Videos From Matt</button>
                </div>
            </div>
        </div>
  • Included the code needed to reproduce your problem so that we have a [mcve] please. – Michael Coker Feb 21 '17 at 23:14
  • @MichaelCoker: added the details. –  Feb 21 '17 at 23:17
  • Possible duplicate of [Shrink a YouTube video to responsive width](http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width) – pol Feb 21 '17 at 23:19

1 Answers1

2

The Youtube URL is wrong. Replaced v with embed in the URL and replaced your first & with a ? to denote the start of query strings.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/lQ2EZdkLCfc?version=3&loop=1&playlist=gq_zxxutiok,GEuouxgqa3Q,iwiXhnjlRuw" frameborder="0" allowfullscreen></iframe>
    <div class="more-videos">
      <button type="button" class="btn btn-warning">View More Videos From Matt</button>
    </div>
  </div>
</div>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • Added this code to the site. Does not work on the site. –  Feb 21 '17 at 23:28
  • The url is not the problem. Try opening it in a new tab. – pol Feb 21 '17 at 23:29
  • @pol it's a youtube iframe embed - has to be called with `/embed/` not `/v/` http://codepen.io/anon/pen/YNmoKg works fine in a browser tab on it's own, but not from an iframe. – Michael Coker Feb 21 '17 at 23:32
  • 1
    @FahadUddin you need to provide everything needed to replicate the problem in your post. We aren't here to troubleshoot your personal website. You have a `theme.min.css` that has `.embed-responsive { ... padding: 0; }` that is overwriting bootstrap's `.embed-responsive-16by9` padding. If you remove that, you'll see the video appears. – Michael Coker Feb 21 '17 at 23:37