Is it possible to make videos in WordPress 4.2.x responsive using the oEmbed shortcode? If not, are there better solutions than having to use some outdated plugin? I can hardly imagine that WordPress 4.1 and higher cannot place responsive content out-of-the-box since it has become so mobile-friendly!
I have searched and searched but have found nothing so far ... probably just not using the right search terms. I can hardly imagine that WordPress 4.1 and higher cannot place responsive content out-of-the-box since it has become so mobile-friendly!
This may or may not answer your question, but I've just tried something that works by installing a plugin called Advanced Responsive Video Embedder and adding the following css:
.embed-youtube {
position: relative;
width: 100%;
height: 0;
padding-bottom: 60%;
}
.embed-youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The Plug-in also has some really good options, like editing paramaters of the embed like so: wmode=transparent iv_load_policy=3 modestbranding=1 rel=0 autohide=1
P.S.: .embed-youtube is the class name of the container div engendered by the plug-in..
Hope that helps!
You can use the plugin called 'FitVids for WordPress' to make your youtube videos responsive.
You can use it like this:
<div id="youtubevid">
[youtube R-S9vXFVOnU]
</div>
Now you have to add this CSS selector to make it responsive using the plugin. Go to Appearance->FitVids and enter the id of the selector and save changes: jQuery("#youtubevid").fitVids();
I wrote a plugin called "Responsive Media". It makes embedded media by oEmbed responsive out of the box.
https://wordpress.org/plugins/responsive-media/
Related
The code I have tried in style.css is:
.woocommerce-store-notice, p.demo_store {
position: fixed;
top: auto;
bottom: 0;
}
I have consolidated with other sources to confirm this was correct without resolution. It simply does not change the notice. It may be worth noting that I am editing the multi-currency banner for WooCommerce, but the provided classes match with what is found on Google Chrome's inspect.
I'm actually using the Divi Visual Builder and I would like display a blog grid who show title of each posts on the image of the posts only when you move the mouse over it.
I found some solutions on the web, but either it doesn't work at all, or the effect doesn't work in tablet and mobile displays. There is nothing about this on the Divi MarketPlace for the Blog module.
here is an example of what I would like to do : http://www.artazoi.com/murs-a-programmation/
(this website is using the Bakery Page Builder and I don't want to use it)
Do you know if Elementor Pro offers this option ?
Thank you all for your helps :)
Use a simple DIVI Builder Blog Module with position absolute. Add this CSS code
.et_pb_module.et_pb_blog_grid_wrapper article{
position: relative;
}
.et_pb_module.et_pb_blog_grid_wrapper article .entry-title{
display: none;
position: absolute;
top: 0;
}
.et_pb_module.et_pb_blog_grid_wrapper article:hover .entry-title{
display: block;
}
I have the following problem, one of our customers wants to have a certain animated graphic on one of their pages.
graphic
link
It's basically a metal nut that u can turn with your mouse wheel to see what services they offer regarding production.
On the old website they had, it implemented like this
Nicely, fullscreen with scrolling functionality.
However, when I try to use an iframe to implement the graphic it looks like this (scroll to the bottom to see the graphic)
The code I use for the iframe is the following:
<iframe class="fuenfeck" src="https://sinerefl.sirv.com/qualicut/qualicut.spin">
</iframe>
I already tried to add width attribute but it only makes the container larger, not the graphic. I'm new to the whole iframe stuff, so I really need your help =)
Thanks and regards!
If you observe their css you will find somthing like that, that is useful for the iframe to be adaptative :
.responsive-iframe {
position: relative;
width: 100%;
padding-bottom: 62.5%;
}
.responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="responsive-iframe"><iframe class="fuenfeck" src="https://sinerefl.sirv.com/qualicut/qualicut.spin">
</iframe>
</div>
any particular reason you want to use an iFrame? A much better way of embedding a Sirv Spin is to follow these instructions - https://sirv.com/help/articles/sirv-spin/#embed-a-360-spin
<script src="https://scripts.sirv.com/sirv.js"></script>
<div class="Sirv" data-src="https://sinerefl.sirv.com/qualicut/qualicut.spin"></div>
There's also a WordPress plugin - https://wordpress.org/plugins/sirv/ which is Divi compatible
Hello this is my first post please forgive me if I do not follow a all of the guidelines. I am building a website for a client and I really want to use a scrolling news ticker which is a Wordpress plugin. I am using the Zurb Foundation 4 framework to build my website. Is there any way to use this plugin outside of Wordpress of foundation? I already guessing the answer is no. I found this link the gives a description on how use a plugin outside of Wordpress, but it is very vague.
http://wpengineer.com/1038/embed-wordpress-functions-outside-wordpress/
The link to the ticker is here.
http://peadig.com/wordpress-plugins/latest-news-ticker-pro/
I have seen other news tickers out there using jquery and flash but none like this. Is there any tickers out there out there that are similar? Also what is the best way to replicate this news ticker if all falls. Please help thank you!!
Using a Wordpress plugin outside of Wordpress likely is technically possible, but the hassle you'd have to go through to get it to work would not be worth the effort.
I think your best bet would be to use something like this, and then just add your own CSS to mimic the style of the Wordpress plugin you like (fixed position, full width etc.).
Here's some CSS to get you started:
.ticker-wrapper{
width: 100%;
bottom: 0px;
position: fixed;
left: 0px;
border-radius: 0px;
margin: 0px;
padding: 20px;
}
I use NextGEN Player Template plugin, It is great plugin, but it shows portrait pictures in landscape mode. In other words, plugin takes the central part of the image and shows it as landscape orientation image.
And it is not the nextgen gallery issue, because this another plugin works with nextgen gallery too, but as we can see on third screenshot, it shows portrait images in portrait orientation. But this plugin has another problems, so I can't use it.
So, I need to see portrait orientation pictures in portrait orientation using NextGEN Player Template plugin. Cam anyone help?!
Answer for last comment with picture:
My advice is to upload or see an example of the plugin. Then look at the source code with either chrome's or fire foxes "Inspector", they allow you to see each element and what they do with the page. Then find the DIV that is containing the image or Style that is editing the image itself. And then edit it accordingly. Though since this is a plugin there is probably a piece code that applies this to each div so you will need to track that back also. Or find someone who is willing to look inside all of your code. but perhaps research a little first and look into your code.
Ok i looked through your code there.
Try changing this
$('div.gv_panel').live('click', function() {
$.fancybox({
autoScale: true,
to false.
Also these things apply to changing the image.
<div id="ngg_player_bg_changer" class="ngg-player-bg-changer" style="display: block;">
<div class="gv_panel" style="width: 564px; height: 400px; left: 0px;"><img style="visibility: visible; width: 601.504px; height: 400px; top: 0px; left: -19px; display: inline;" src="http://piotr-tokarczyk.pl/wp-content/gallery/player-1-2/g7.jpg"></img></div>
Holds all the different images i think
Hope this helps :)
As the plugin is being actively developed, I would certainly suggest posting in http://wordpress.org/support/plugin/nextgen-player-template as Piotr seems to respond fairly quickly.