I am having issues with the code as well. In all browsers the iframe cannot content be displayed.
I am using the following code:
<!--Grid row-->
<div class="row d-flex justify-content-center">
<!--Grid column-->
<div class="col-md-6">
<p class="h5 mb-4">Making Sense of Complexity</p>
<div class="embed-responsive embed-responsive-16by9 z-depth-3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/watch?v=N6wjC0sxD2o" allowfullscreen></iframe>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
A quick google search shows that something is disabling the iframe.
Any ideas?
This is what shows up/how it is rendered:
[page cannot be found]
Related
here is my html code, what i want do when cursor on iframe when i click it plays video and when i scroll parent page scroll
<section class="section section-padding">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title text-center">
<h2>How We Work</h2>
</div>
</div>
<div class="col-lg-6">
<div class="">
<iframe width=560 height=315 src="https://www.youtube.com/embed/wYHA_qStcqE?rel=0&controls=0&showinfo=0" frameborder=0 allowfullscreen></iframe>
</div>
</div>
<div class="col-lg-5">
<div class="content">
<iframe width=560 height=315 src="https://www.youtube.com/embed/sy41imOrHbg?rel=0&controls=0&showinfo=0" frameborder=0 allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
You can add this attribute "scrolling".
<section class="section section-padding">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title text-center">
<h2>How We Work</h2>
</div>
</div>
<div class="col-lg-6">
<div class="">
<iframe scrolling="yes" width=560 height=315 src="https://www.youtube.com/embed/wYHA_qStcqE?rel=0&controls=0&showinfo=0" frameborder=0 allowfullscreen></iframe>
</div>
</div>
<div class="col-lg-5">
<div class="content">
<iframe scrolling="yes" width=560 height=315 src="https://www.youtube.com/embed/sy41imOrHbg?rel=0&controls=0&showinfo=0" frameborder=0 allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
Here is my webpage.
http://ownscene.com/index-en.html
The problem is with the embed video in 2nd section.
Here is the code
<!-- present -->
<section class="no-padding bg-primary">
<div>
<div class="row">
<div style="color: #fff;" class="col-lg-2"></div>
<div class="col-lg-8 col-md-12 wow fadeIn" >
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/HLKPZ-vFYqI"></iframe>
</div>
</div>
<div style="color: #fff;" class="col-lg-2"></div>
</div>
</section>
<!-- present -->
I tried removing both left and right div and weird blank space is gone.
I don't know what to do, I want it to be centered and smaller on lg then take full space in md
Please help
Thank you,
Try using col-lg-offset
<div class="container-fluid">
<div class="col-lg-8 col-md-12 col-lg-offset-2 col-md-offset-0 wow fadeIn" >
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/HLKPZ-vFYqI"></iframe>
</div>
</div>
</div>
Remove the border using CSS since iframe has default border
<iframe style="border: 0 none" class="embed-responsive-item" src="//www.youtube.com/embed/HLKPZ-vFYqI"></iframe>
I am not sure if this white space above the div is caused by a media query or by something in the twitter bootstrap css.
Here is the page at mid view: http://postimg.org/image/gq9dfuuah
Here is my markup for the top section of the page:
<div class="page-section intro">
<div class="container">
<div class="logo"><img src="../../images/logo-2.png" id="backdrop"></div>
<div class="intro_wrapper">
<div class="row">
<div class="col-md-6"><span class="pull-right">
<div class="mockup">
<img src="../../images/techandall_shadow_series_apple.png" id="backdrop">
</div>
</div></span>
<div class="col-md-6">
<span class="pull-right">
<div class="saying">Design, Development, Dedication</div>
<div class="left"><p class="lead center">We are highly experienced in Responsive Web Design, Database-driven websites, Content Management Systems, and Custom Web Applications.</p>
</div>
<div class="intro_buttons center-block">
<div class="center_button">
Get A Quote
</div>
</div>
</div></span>
</div>
</div><!-- feature_wrapper -->
</div><!--/.container-->
I have problem with the Bootstrap grid system on my new website /services-page (kenpils.se.
I would prefer 3 rows with 2 columns instead to make the text in the columns better readable on tablet. Right now the columns are to narrow due to the icon on the left side of each column.
As far as I understand, each row is one div which makes it difficult to slide up the "commercial-column" next to the "editorial-column". There is also a divide30-class between the two rows.
Would appreciate some advice.
The solution to this I have found works best is to duplicate your content in a tablet layout. then use visible-* (documented here) class attributes to hide and make visible specific content to specific screen resolutions. You will need to add visible-* class attributes to your <div class="row"> and change your col-sm-4 to col-md-4 see below:
<div class="row visible-lg visible-md">
<div class="col-md-4">
<!-- Your Content 1-->
</div>
<div class="col-md-4">
<!-- Your Content 2-->
</div>
<div class="col-md-4">
<!-- Your Content 3-->
</div>
</div>
<div class="row visible-lg visible-md">
<div class="col-md-4">
<!-- Your Content 4-->
</div>
<div class="col-md-4">
<!-- Your Content 5-->
</div>
<div class="col-md-4">
<!-- Your Content 6-->
</div>
</div>
Then add a section under that in your code duplicating the information and hiding it on larger screen resolutions. see below:
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 1-->
</div>
<div class="col-sm-6">
<!-- Your Content 2-->
</div>
</div>
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 3-->
</div>
<div class="col-sm-6">
<!-- Your Content 4-->
</div>
</div>
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 5-->
</div>
<div class="col-sm-6">
<!-- Your Content 6-->
</div>
</div>
This will provide the formatting you desire. Hope this helps.
NOTE: THE BELOW SOLUTION DOESNT ALTER THE LAYOUT AT ALL as you require. It provides an alternative solution !
<div class="col-services">
<div class="row">
<div class="col-sm-4></div>
<div class="col-sm-4></div>
<div class="col-sm-4></div>
</div>
</div>
This means that the break wont occur until the width reduces below tablet-zone !
col-sm-4 -> break after tablet-zone width
col-md-4 -> break after normal desktop width
Replace it with
<div class="col-services">
<div class="row">
<div class="col-md-4></div>
<div class="col-md-4></div>
<div class="col-md-4></div>
</div>
</div>
This makes sure that the break occurs at the tablet level itself!
Actually i have designed the template for one of my games site. In the when i play the game iam getting some problem in IE9 but no issues with other browsers. For clear understanding the issue please see this
play page Code:
<div style="float:left">
<div class="gameContentsurround">
<div class="gameContentbg">
<div class="gameDiv">
<div align='center'>
<!--game content here-->
</div>
</div>
</div>
<div class="gameboxbelowheight"></div>
</div>
<div style='height:5px'></div>
<div style="clear:both"></div>
<div class="gameDesc">
<!--game description here-->
</div>
<div class="moregamesbg">
<div class="moregameswhitebg">
<!--more games section here-->
</div>
</div>
</div>
<div style="float:right; width:390px">
<!--right column where actual issue comes here in IE9-->
</div>
right_column code:
<div class="playAdsWhiteBg">
<div class='playAdsDiv'>
<center>
google ads
</center>
</div>
</div>
<div style="clear:both"></div>
<div style='height:2px'></div>
<!-- Ads END -->
<!-- Ads -->
<!--<div><?php echo SPONSORS_TITLE;?></div> -->
<div class="playAdsWhiteBg">
<div class='playAdsDiv'>
<center>
google ads
</center>
</div>
</div>
<div style="clear:both"></div>
<div style='height:2px'></div>
<!-- Ads END -->
<!-- Comments Section -->
<div class="playAdsWhiteBg">
<div class='playAdsDiv'>
<div style="overflow:scroll">
fb comments
</div>
</div>
</div>
<div style="clear:both"></div>
<div style='height:2px'></div>
<!-- Rating Section -->
<div class="ratethisgameWhiteBg">
<div class='ratethisgameDiv'>
rating system
</div>
</div>
Add width: 390px to content's first child.
When you use floating elements you should always set their width