Member Avatar for Richard_24
Richard_24 0 Newbie Poster

Basically I have made this site:

Here is a description of what is happening, with all of the code that has to do with it.

jquery:

`$('.episodeLink').click(function() {
$(".episodeTitle").html($(this).clone());
document.getElementById('ifrm').src = $(this).attr("href");
$(".epChange").css('display', 'inherit')
$('#youtube_iframe iframe').eq(0).attr('style','width: 728px;height: 420px;float: left;margin-left: 92px;margin-top: 30px;-ms-zoom: 0.833;-moz-transform: scale(0.8333);-moz-transform-origin: 0 0;-o-transform: scale(0.8333);-o-transform-origin: 0 0;-webkit-transform: scale(0.8333);-webkit-transform-origin: 0 0;'
);
$('#youtube_iframe iframe').eq(1).attr('style','width: 728px;height: 106px;float: left;-ms-zoom: 0.833;-moz-transform: scale(0.8333);-moz-transform-origin: 0 0;-o-transform: scale(0.8333);-o-transform-origin: 0 0;-webkit-transform: scale(0.8333);-webkit-transform-origin: 0 0;
); })`

HTML:

`<div id="youtube_iframe"> <div class="permalinkTitle"><p class="episodeTitle">One Piece on 8Anime TV</p></div> <iframe id="ifrm" name="ifrm" src="http://static.tumblr.com/c239f5a04265e2ae80ce7be610afac94/65oqtvm/6denozy2f/tumblr_static_95mwiqke5x4wc4s0owggs8wss.png"
                        class="foo" 
                        scrolling="no" 
                        seamless="seamless"> </iframe> </div> <ul> <li><a class="episodeLink" target="ifrm" href="">Episode 694 | Invincible! A Gruesome Army of Headcracker Dolls!</a></li></ul>`

CSS:

`#youtube_iframe iframe {
                    width: 1215px;
                    height: 700px;
                    float: left;
                    margin-left: 92px;
                    margin-top: 30px;
                    z-index:10;
                  -ms-zoom: 0.5;
                  -moz-transform: scale(0.5);
                  -moz-transform-origin: 0 0;
                  -o-transform: scale(0.5);
                  -o-transform-origin: 0 0;
                  -webkit-transform: scale(0.5);
                  -webkit-transform-origin: 0 0;
            }`

What happens is that when you click on the .episodeLink link it changes the html of the title div to what the content of the link is (the title of the episode).
Then it changes the source of the iframe to the href of the link, which is the episode you want to watch
Lastly it transforms/scales the iframe so that it will fit perfectly. It scales it from 0.5 which is the size required for the image, which loads up at the beginning, to fit perfectly, to 0.8333 which is the required size for the video players to fit perfectly.
It seems, though, as the buttons of the iframe (play button, fullscreen button etc.) doesn't scale to 0.8333...
Any ideas of where the problem might be?

  • 1 Contributor
  • 0 Replies
  • 186 Views

Dani AI

Generated

A few focused checks will usually find the problem faster than chasing scale numbers. The controls not matching your 0.8333 scale most often comes from one of these: the style being applied to the wrong element (a different iframe than the player), a broken inline-style string from using .attr('style', ...), or the player content being rendered by a plugin/nested frame that the page isn’t actually transforming. Start by confirming which iframe hosts the player and whether the transform is really reaching that exact element.

Quick troubleshooting checklist

  • Open DevTools after clicking an episode and inspect the iframe that contains the controls. Verify the computed transform and transform-origin on that exact element.
  • In the console, list the iframes under the container to confirm order and src values (e.g., document.querySelectorAll('#youtube_iframe iframe')) so you’re not styling a different iframe by index.
  • Avoid replacing the whole style attribute with a long string (easy to break). Use class toggles or jQuery’s .css() so individual properties aren’t accidentally malformed or overwritten.

A more robust approach

  • Stop relying on pixel-level transforms where possible. Make the iframe responsive (or set its viewport size) and let the player render at the correct dimensions instead of visually scaling the bitmap. Modern options: a fixed-width wrapper + aspect-ratio or the padding-top technique, and set the iframe to width:100%; height:100%. This keeps controls sharp and consistent across browsers.

Practical notes and gotchas

  • Cross-origin iframes cannot be modified from your page — you can only style the iframe element itself. If the player uses a plugin (Flash historically), some browsers won’t scale plugin content the same way as normal DOM. Test the iframe src directly in a new tab to see how the player behaves without transforms.
  • Replace inline-style manipulation with class toggles for maintainability and fewer surprises. This also makes it easier to test different scales and to debug differences between browsers.

If you want, post the runtime DOM snapshot (the iframe list and computed styles) and it’s possible to point out exactly which selector to change.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.