I am trying to customize a theme in tumblr so that it embeds videos in their full scale in a blog, but i can't seem to do it...
here are the instances in the code that refer to video
.video-post .video {margin-bottom:1.5em;}
{block:Video}
<div class="content video-post">
<div class="video">{Video-500}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Video}
i tried some basic stuff like removing the -500 and/or adding height="100%"; width="100%" at some places but it does not work that way..
See http://webdesignerwall.com/tutorials/css-elastic-videos or http://fitvidsjs.com/
Related
All the pages on my responsive site look fine on my Galaxy S7 except my homepage and I can't figure out why.
Here's an example of a page that looks fine:
http://edge-trainer.com/kick-in-the-butt-jumpstart.php
Here's my homepage:
http://edge-trainer.com/
I'm using the same CSS. Looking at my source code, can anyone see what the problem might be?
Thank you in advance.
Tim
The problem in your homepage is that the content-wrappers are not inside the content container.
Within your normal page you linked the dom structure is
<div id="content-container">
<div class="content-wrapper>yourcontent</div>
</div>
whereas in your home page it is
<div id="content-container">
<div class="content-wrapper>yourcontent</div>
</div>
<div class="content-wrapper>yourcontent</div>
<div class="content-wrapper>yourcontent</div>
<div class="content-wrapper>yourcontent</div>
Judging by your CSS, all of the .content-wrappers should be inside #content-container
As a sidenote, it might be worth looking into flexbox and relative sizing for the layout you're trying out, it might make your life a bit easier, just a suggestion ;)
While working on a project, I discovered some of my images on Tumblr are not displaying. The only clue I've found is that within the responsive-level-1 class (see below for html code), the height of the iFrame is set to 0. If I pop open a dev console in Chrome and set that to be, e.g., 1632 (not 0), the image appears. I'm using a theme (Brick theme/theme garden) , but am able to edit the html and css. Can I modify my css and/or HTML to fix this? The issue occurs across device platforms (desktop/phone/tablet).
Example of no image displayed- http://deligrossery.com/post/149661412746/gawad-deli-grocery-207-hart-st-brooklyn-ny
corresponding css files:
responsive.css: http://static.tumblr.com/eftyn9y/kc0og8vio/responsive.css
style.css: static.tumblr.com/3zmswwt/Fmkmwgp8e/style.css
(^ I can't post more than 2 links until my reputation is at least 10/add an https:// to the style.css).
<iframe id="photoset_iframe_149661412746" class="photoset" scrolling="no" frameborder="0" height="0" width="500" style="border:0px; background-color:transparent; overflow:hidden;" src="http://deligrossery.com/post/149661412746/photoset_iframe/deligrossery/tumblr_ocn1e9dTfK1txl3g8/500/false" name="photoset_iframe_149661412746"></iframe>
Try changing your photoset layout block to something like this (you may need to tweak this slightly):
{block:Photoset}
<div class="content photoset">
{block:Photos}
<img src="{PhotoURL-500}"/>
{/block:Photos}
{block:Caption}
<div class="description">{Caption}</div>
{/block:Caption}
<p></p>
</div>
{/block:Photoset}
Keep a backup of your current theme.
This should output the photoset in the normal html template (not iframe). From there it should be much easier to control the height of the content, in fact by default it should just output the content and the height will be fixed automatically. But there might be other issues to investigate after this.
I've embedded a lot of videos in my moodle page. Some of them are not loading at all or talkig forever to load. Sorry for posting a stupid question, but I just don't know what to do.
Could there be something in the iframe that is causing problems:
<center>
<div class="video-max-size">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="http://player.vimeo.com/video/116054472?title=0&byline=0&portrait=0" frameborder="0" width="500" height="281"></iframe>
</div>
</div>
</center>
Any tip would be very appreciated!
You might need to install a filter. So when you embed the vimeo code it plays correctly. There is a plug in over here:
https://moodle.org/plugins/view/filter_vimeoembed
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.
I am using the Facebook Like social plugin on my website, and every time the page loads, the plugin stretches the height of the div it is in until the plugin has loaded.
I did define the height of the div that the social plugin is in, but even though the height stayed the same, you could still see the shift. I am also using the Twitter and Google plus social plugins - this makes the shift more noticeable since they get shifted also (shift under the h3 heading).
.socialBookmarks {margin:30px 0;padding:5px 15px;overflow:hidden;}
.socialBookmarks .social-wrap
{display:inline-block;vertical-align:middle;}
.social-wrap .ezimageBox {float:left}
<div class="socialBookmarks">
<h3 class="inline-block">Share:</h3>
<div class="social-wrap clearfix">
<div class="ezimageBox">
(loads twitter social plugin)
</div>
<div class="ezimageBox">
(loads google plus social plugin
</div>
<div class="ezimageBox">
(loads facebook social plugin)
</div>
</div>
</div>
Anyone have any ideas on how to work around this problem? :)
Setting the width and height of the wrapping <div> (in your case, .ezimageBox) usually does the trick for me.
Try this:
.social-wrap .ezimageBox {float:left, width:100px, height: 20px; overflow:hidden;}
Does it still flicker?