I have a tumblr with many YouTube video posts. I am wondering how I could use CSS to select the {Video-400} post code and hide the automatic controls that show up on the video.
Here is an example of the automatic controls/visible title I am referring to. They only go away once you play the video: http://jaspingo.tumblr.com/post/105022194129/lol-that-last-one-though.
Also, here are a couple of CSS selectors that might be of use (I don't know the exact differences between them).
#content .video{
}
.video{
}
#content .video iframe{
}
And below is the corresponding HTML.
<div id="content">
<div class="posts">
{block:Posts}
<div class="entry">
{block:Video}
<div class="video">
{Video-400}
</div>
{/block:Video}
</div>
{/block:Posts}
</div>
</div>
Any help would be appreciated. I need to understand the difference between the CSS selectors to fully comprehend the way the code works. And yes, i have tried custom embed code from YouTube, but the same problem exists.
I don't know how Tumblr does their embeds, but you can grab the embed code from YouTube without the controls. A typical embed code looks like:
<iframe width="560" height="315" src="//www.youtube.com/embed/F8Z-ayQkK2A" frameborder="0" allowfullscreen></iframe>
If you want to remove the controls after the fact, you need to add ?controls=0 to the end of the src URL. It becomes:
<iframe width="560" height="315" src="//www.youtube.com/embed/F8Z-ayQkK2A?controls=0" frameborder="0" allowfullscreen></iframe>
To demonstrate, here's the same video using the control parameter outside of an embed code.
The only issue you could run into is with Tumblr using the YouTube API to call the video rather than the embed code. In that case, I'm not sure there's much you can do about it unless you have access to the source and the method for pulling the video into your blog.