-- Hey there!
Dear Reader, if navigating Tumblr isn't your cup of tea, let me know and I'll provide more detailed instructions!
I recently ran into some glitches on my Tumblr page while using the default theme 'Optica'. Whenever I tried posting an embed SoundCloud track, this is what showed up:
see image below
NOTE: Switching themes didn't solve the issue entirely. Some themes worked fine, while others still had the same bug.
In an attempt to fix it, I pinpointed the root cause in the main.css stylesheet under the following code snippet:
.video .video-wrapper {
background: #111;
position: relative;
padding-bottom: 56%;
height: 0;
}
To embed a code, Tumblr requires the use of the "Video post" tool on your dashboard, allowing you to style the embed with the .video-wrapper class.
The challenge I faced was reducing bottom padding without affecting all Video posts. To get around this, I utilized the existing class .soundcloud_audio_player within the iframe to distinguish these specific Video posts for styling purposes.
Simplifying things, here's how it finally appeared in the browser:
<article class="audio not-page post-70801339374 " data-post-id="post_70801339374">
<div class="post-wrapper clearfix">
<section class="post">
<figure>
<div class="video-wrapper">
<iframe class="soundcloud_audio_player" />
</div>
</figure>
<section class="attribution-tags clearfix">
<ul>
<li>
<a href="http://hymced.tumblr.com/tagged/SoundCloud" class="tag">SoundCloud</a>
</li>
<li>
<a href="http://hymced.tumblr.com/tagged/Blutch" class="tag">Blutch</a>
</li>
</ul>
</section>
</section>
<section class="panel" />
</div>
<article>
This is what I included between the tags in my custom Tumblr HTML:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3");
google.setOnLoadCallback(function() {
jQuery(function($) {
$("iframe.soundcloud_audio_player").parents('div.video-wrapper').css("padding-bottom", "17%");
});
});
</script>
Judging by my lack of JavaScript and jQuery knowledge until today, I opted for jQuery assuming it was simpler. Problem #1 resolved! But now... PROBLEM #2
While the page loads, the initial styling (before JS kicks in) briefly displays for a second or two (depending on my bandwidth), making it look rather unsightly:
refer to image below
I scouted around here and here but couldn't find a solution to enhance loading speed. I'm counting on you folks to lend a hand :)
PageSpeed test results down below