TECRIDIBLE
Dear Graham,
you gave me this code some days back for my
site it worked here
next launcher 3d shell but the code is not working on blog
<style>
/* This element defines the size the iframe will take.
In this example we want to have a ratio of 25:14 */
.aspect-ratio {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%; /* The height of the item will now be 56% of the width. */
}
/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
Copy code
Youtube Code:
<div class="aspect-ratio"><iframe src="http://m.youtube.com/watch?v=uf5HbvbPN0o" width="550" height="275" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
Copy code
This code not worked blog on blog
1. change height to auto
2. width is too much big change to 100% bro
on chrome the video doesn't show only top is visible
Test Page
Graham
TECRIDIBLE The embed code I used is a little different
<div class="aspect-ratio"><iframe src="http://youtube.com/embed/uf5HbvbPN0o?rel=0" allowfullscreen="allowfullscreen"></iframe></div>
Copy code I tested on my own site and it worked as follows
chrome mine worked yours did not (pc)
win 8 mobile
operamini mine worked yours gave a 'not in an Iframe' warning
ucweb both worked
internet explorer mine worked yours gave a 'not in an Iframe' warning
http://cssw3s.xtgem.com/blog/__xtblog_entry/11350652-test?__xtblog_block_id=1
1 / is the css linked
2 / is html enabled for the post
3 / you could set the size limit in the first class by adding max-width:550px you do not need the width and height in the iframe and the border should be removed by css
Graham
TECRIDIBLE number 2 in my previous answer
You had not enabled html for the post
