I am working in wordpress (I don't think it matters much though in this case), and I need to include a header after the menu, full width and only 180px height. But no way it is working!! If I try to put my height (different than 100% or auto), the video becomes small enough to keep the size scaled, but it is not what I need.
The thing is, the final video would be a video recorded through a post box mouth (not sure how it is called), so it is quiet width but not much high.
I'm finding to explain myself quiet hard, so if anyone doesn't understand what I mean, but they have an idea what I can do, please, let me know!!
<video id="video" width="100%" height="180px" controls autoplay>'
. '<source src="'.get_stylesheet_directory_uri().'/video/money.mp4" type="video/mp4">'
. '<source src="'.get_stylesheet_directory_uri().'/video/money.ogg" type="video/ogg">'
. '<source src="'.get_stylesheet_directory_uri().'/video/money.webm" type="video/webm"></video>
I've tried to use plugins but I have the same problem....
I would appreciate any kind of suggestion! Thank you
Well, it wasn't very difficult.... maybe it was too early to think properly. So I've just added a wrap and give it the 100% width and 180px height and then overflow:hidden and it solved my issue...
php:
if(is_page('solutions')){
echo '<div class="wrapperVideo"><video id="video" width="100%" height="auto" autoplay loop>'
.'<source src="'.get_stylesheet_directory_uri().'/video/money.mp4" type="video/mp4">'
. '<source src="'.get_stylesheet_directory_uri().'/video/money.ogg" type="video/ogg">'
. '<source src="'.get_stylesheet_directory_uri().'/video/money.webm" type="video/webm">'
. '</video>'
. '<div class="sentenceOfTheDayVideo"><span>"Enjoy a cup of tea"</span> - SOMEONE</div>'
. '</div>';
}
css:
.wrapperVideo{
width:100%;
height:180px;
overflow:hidden;
}
Please Use this Plugins
https://wordpress.org/plugins/hana-flv-player/
Requird https://get.adobe.com/flashplayer/
Usage Example
You can place the specific tag element [hana-flv-player] in your wordpress article to show the video. The 'video' attribute is mandatory. There are other optional attributes. Default values for the options can be defined in this pages. See the bottom of the page for the example.
[hana-flv-player
video="http://yourwebsite.com/wp-content/plugins/hana-flv-player/babyhana.flv"
width="1000"
height="180"
description="Sarah is having fun in a merry-go-round"
clickurl="http://yourwebsite.com/"
clicktarget="_blank"
player="5"
autoplay="false"
loop="false"
autorewind="true"
splashimage="http://yourwebsite.com/wp-content/plugins/hana-flv-player/splash.jpg"
skin="mejs-wmp"
/]
Insert flv into template theme files (such as sidebar.php):
Okay, here is the function that you can use in the theme template files to show FLV movie. Basically you need to use hana_flv_player_template_call method. The method takes a single argument. The argument should be just the string of the attributes of usage explained the above. Just copy below code into your theme file and edit red colored attributes accordingly.
<?php
if (function_exists('hana_flv_player_template_call')){
$hana_arg="
video='http://localhost/wp/wp-content/plugins/hana-flv-player/babyhana.flv'
player='2'
width='1000'
height='100'
more_2=\"showStopButton: false, showScrubber: false, showVolumeSlider: false,showMuteVolumeButton: false,
showFullScreenButton: false, showMenu: false, controlsOverVideo: 'locked',controlBarBackgroundColor: -1,
controlBarGloss: 'none', usePlayOverlay:false \"
";
echo hana_flv_player_template_call($hana_arg);
}
?>
Related
How can I have different breadcrumbs background pictures, depending on visited page? Is this possible without using some additional modules?
You really don't need a module for this. What you can do is specify a div id on each page (in the content), and then, you will have a CSS that is something like the following:
#page-123 .breadcrumb{
background-color: #ff0000; /* background color is red */
}
I think the easiest way is to modify the index.php file of your template:
Something along the lines:
<head>...</head>
<?php
$params = &$app->getParams();
$pageclass = $params->get('page_title');
$pageclassname = str_replace(' ', '-' ,strtolower($pageclass));
?>
<body id="<?php echo $pageclassname; ?>"> ... </body>
That way you have a nice id that you can use for all your styling needs and your css code is more readable.
I have styled my images on my Content Page Template to have borders, backgrounds and box-shadow. If I don't use the optional image field and leave it empty, it leaves the css styling with a small box. I have been trying to hide the entire .content-img class if there is no image present. The code below works fine for rendering the images if they are present. How to hide it if no image is present.
<?php the_field('top_headline'); ?></h1>
<div class="content-top"><?php the_field('content_top'); ?></div>
<div class="content-img"><?php
$image = get_field('content_image');
$size = 'medium'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
} ?>
Thanks for your help in advance.
So I took care of it using CSS instead of in the array. instead of using the css class .content-img (which is my parent div), I added the image to the class .content-img img and if no image is present, the css wont show.
I'm looking for a solution to activate a CSS3 Animation when in viewport without changing the class of the container. Any suggestions?
What I've done is a wordpress shortcode to wrap an element with the animate.css classes
function bounce( $atts, $content = null ) {
return '<div class="animated bounce">'.do_shortcode($content).'</div>';
}
add_shortcode("Bounce", "bounce");
function flash( $atts, $content = null ) {
return '<div class="animated flash">'.do_shortcode($content).'</div>';
}
add_shortcode("Flash", "flash");
This will output
<div class="animated bounce">My Content</div>
or
<div class="animated flash">My Content</div>
Now I only want the animation to start when it's in the viewport. But as I added it as a shortcode I don't know the class of the parent element to add the "animated bounce" when its entering the viewport AND as the customer could use this shortcode at ANY position in the theme it could also be the same class on multiple areas on the site. so it really needs to look for the single element, not the element class.
I guess I have to load the shortcode when in viewport, not the animation. But I don't know how. Remember: The same shortcode could be 10 times on one page, but every single of those 10 shortcodes should only shoot if they are visible right now.
Hope you understand my problem and can serve a solution. Thank you in advance!
I've noticed that on some product pages of my site (but not all) I'm getting a strange issue where one of the product images appears in the row below the one it's meant to.
So on some pages the 'People who bought this also purchased...' images, on the last line one of the products drops down a line and is obviously out of place.
http://tinyurl.com/cs6d3q5
but most other pages are fine!
http://tinyurl.com/clwq3dz
I can't figure out whats the problem. As far as I can see they should both act the same way. Can anyone enlighten me and also tell me how they debugged it? I use Firebug and developer tools on FF but they don't seem as useful as they once did
thanks
here's the code used to create it:
if($also_purchased_products->RecordCount() > 0) {
echo '<div style="clear:both"></div>';
echo '<div class="sideboxHeading">People who bought this also purchased...</div> <div class="ProdInfoDotSpacer"></div>';
while (!$also_purchased_products->EOF) {
$also_purchased_products->fields['products_name'] = zen_get_products_name($also_purchased_products->fields['products_id']);
echo '<div class="alsoPurchasedWrapper">';
echo '' . zen_image(DIR_WS_IMAGES . $also_purchased_products->fields['products_image'], $also_purchased_products->fields['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '<br />';
echo '' . $also_purchased_products->fields['products_name'] . '';
echo '</div>';
$also_purchased_products->MoveNext();
}
}
its because
Black/Sage Guinness harp knit
here Black/Sage Guinness harp knit scarf is long try sorting it
The problem appears when the previous item text link is more than one line long. You can truncate it, as NullPointer says, or set a height on .alsoPurchasedWrapper:
.alsoPurchasedWrapper {
float: left;
width: 150px;
margin: 5px 0px 10px 20px;
height: 170px;
}
I am working with a client. Their webpage is using this DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I need to deliver content to pages on their site. My content looks like this
<div style="height:1000px">
<iframe frameborder="0" src="..." width="550" height="220"></iframe>
<br/>
<br/>
<iframe frameborder="0" src="..." width="550" height="220"></iframe>
</div>
I can place the content on the clients page by giving them a couple of lines of css, and, currently, and iframe:
<style>
.iframecontent
{
background-color:blue;
position: relative;
height: 100%;
width: 100%
}
</style>
<iframe class="iframecontent" frameborder="0" src="..." width="100%" scrolling="no"> </iframe>
Because the height of the content is dynamic, I cannot provide a specific height to the client - instead I need it to stretch.
I've read many posts, but am still not sure of the best way to do this. Possibly CORS? Something else?
Here is one solution offered: http://sly777.github.com/Iframe-Height-Jquery-Plugin/ - it works on the same domain, but for cross-domain talk it relies on PostMessage which is an HTML 5 thing.
I've tried http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/ but have not be able to get it to work.
I might just get the client to set the frame to 1500px so that it should fit whatever I choose to be in the content and be done with it, but is there a better way?
Could you just set the html,body{height:100%;} then your iframe{height:100%}?
A percentage height is directly dependant on it's parent's height (of a block element). ie: iframe is 100% of what? In this case, it's parent is the body.
You may use the postMessage Plugin http://benalman.com/projects/jquery-postmessage-plugin/
It enables you to post messages from inside an iframe to the parent element. In combination the the setInterval javascript function you may send the current needed size to the parent element.
Inside the iframe
var currentIframeSize = 0;
window.setInterval(function() {
var size = $('body').outerHeight(true);
//just post, if the size has changed
if ( currentIframeSize != size ){
currentIframeSize = size;
$.postMessage({if_height : size}, source_url, parent);
}
}, 1000); //do that every second
In the head section of the parent element
id = "theIdOfYourIframe";
$.receiveMessage(function(e){
var rec_height = Number( e.data.replace( /.*if_height=(\d+)(?:&|$)/, '$1' ) );
if ( !isNaN( rec_height ) && rec_height > 0 && rec_height !== current_height ) {
current_height = rec_height;
$('#' + id).height(rec_height);
}
});
Based on those two snippets, you should get your problem solved
I updated my plugin that you tried (http://sly777.github.com/Iframe-Height-Jquery-Plugin/) and i added tutorial how to use this plugin for cross-domain fix. I hope it helps.