1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Responsive iframe embed help

Discussion in 'CSS' started by ftws, Oct 1, 2014.

0
  1. #1
    Hi, i'm using the following responsive theme:
    http://www.armorthemes.com/demo/gameking/highway-driving/

    trying to figure out how to apply the responsive.css rules to the <div id="video-inside"> container and surroundings the same way the .wrap .cf class applies to rest but also making the iframe to autoscale like this example:

    http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/
    <!DOCTYPE html>
<html>
<style>
.video-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 95px;
  height: 0;
  overflow: hidden;
}
</style>
<body>
<div class="video-container">
<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
</div>
</body>
</html>
    Code (markup):
    Anyone firm with the myarcadeplugin and how the 'width/height' fields are written into the HTML please help, i'm really stuck with this part.


    Thanks in advance
     
    Solved! View solution.
    Last edited by a moderator: Oct 1, 2014
    ftws, Oct 1, 2014 IP
  2. #2
    i think the inline width and height have the higher precedence so your css styles will be ignored.
    try to set height and width of your video container as 100% first, then remove the height/width attribute of iframe. and see how it will goes.
     
    brealmz, Oct 1, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    So... you're trying to mix a modern layout technique with a tag that technically has no business on any website written after 1997?
     
    deathshadow, Oct 6, 2014 IP
  4. ftws

    ftws Greenhorn

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    18
    #4
    Solution

    actually the example i already posted had been the right answer, perfectly scaling the iframe, though it was hard to find the right template files and removing some javascript.
     
    ftws, Oct 10, 2014 IP