CODEWITHSUNDEEP
htmlcssasp.net-mvc-4twitter-bootstrap-3bootswatch
Alok
Alok

Reputation: 828

embed video is hiding in bootstrap mobile view


i am using latest version of bootstrap and bootswatch united theme , to create and learn a normal website. the website is currently live on this link live site , and there is an embed in right side as you can see. i am using asp.net mvc as view engine but thats just it.

the code for videos page is on jsfiddle http://jsfiddle.net/v3bjzoej/ as SO doesnt allow it because of XSS problems.

<section class="col-lg-6 pull-right">
<div class="embed-responsive embed-responsive-16by9">
    <iframe src="//player.vimeo.com/video/116351996" webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="0" allowfullscreen></iframe>
</div>
</section>

the same is happening on index page http://jsfiddle.net/pw1zyypf/

i am having troubles with posting complete code on fiddle maybe due to so many mvc objects in it. I know its related to css issues, but a real help will be much appreciated.

Upvotes: 1

Views: 2014

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

Add this col-md-6 col-xs-12 col-sm-6 to the section which have video iframe 

<section class="col-lg-6 col-md-6 col-xs-12 col-sm-6 pull-right">
  <div class="embed-responsive embed-responsive-16by9">
    <iframe src=""></iframe>
  </div>
</section>
  • col-sm-6 - for Small devices Tablets (≥768px) (half)
  • col-md-6 - for Medium devices Desktops (≥992px) (half)
  • col-xs-12 - Extra small devices Phones (<768px) (full)

Upvotes: 2

Related Questions