Same iframe displays differently in page and post

[Swift Ideas – Ed]

Hi @ASBG,

Apologies this has taken so long to get a solid answer, I will be taking this up with the team.

The reason the other video is outputting differently is it’s being processed by the FitVids.js script, which keeps the video aspect ratio intact, and resizes the video so that it is perfect across all viewport widths.

The script has just been updated with ignore selectors, so I’ll get this setup for the next update, and you’ll be able to disable the behaviour with ‘no-resize’ as the class on the video iframe.

Can I ask why you’d rather it not be responsive?

Apologies once again for the delay, I’ve assigned to myself so that I can respond from here on.

– Ed

[Bitedge]

Hi Ed,

I can’t remember how we fixed this but it must have been by editing files because after theme update its back

The exact same iframe

<p style="text-align: center;"><iframe src="https://www.youtube.com/embed/I6PcnqY2-lU?wmode=transparent" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

is displayed at the specified size on pages but not on posts this can be seen by comparing

Page
http://www.bitedge.co/bitcoin-sportsbook-reviews/nitrogen-sports-review/

Post
http://www.bitedge.co/blog/free-0-01bitcoin-to-mit-students-for-using-nitrogen-sports/

Its not specific to this iframe or these pages, its site wide.

[Bitedge]

How can we fix this so that the video is resized as specified on posts?

[Swift Ideas – Ed]

Add this css:

.page-content iframe {
    width: 100%;
}

– Ed

[Bitedge]

Already there and not having the desired effect, even after adding !important

If you watch a post load you can actually see the correct width=”640″ height=”360″ space is made on the screen for the video to sit in then at the last second it expands itself to full size.

There is another piece of custom css that used to work that is being ignored here

possible to change text size in top nav bar and breadcrumb thread?

I wonder if the fix to

inconsistent url references

Is causing this…its that or the latest theme update.

[David Martin – Support]

Hi Bitedge,

Have you added the extra class to the video container? no-resize

The code that Ed provided above has not been added, I only the default max-width:

.page-content iframe {
    max-width: 100%;
}

Can you privately add a login so we can more promptly assist you?

Best,
David.

[Bitedge]

This reply has been marked as private.

[David Martin – Support]

Perfect,

So within your post, if you view the HTML and locate your iFrame:

Change this:

<p style="text-align: center;"><iframe src="https://www.youtube.com/embed/I6PcnqY2-lU?wmode=transparent" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

To This:

<p style="text-align: center;"><iframe class="no-resize" src="https://www.youtube.com/embed/I6PcnqY2-lU?wmode=transparent" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

I have tested this and can confirm it works. Let me know any queries you have.

Thanks,
David.