my Wordpress version is 4.6.6
I am adding my youtube videos to my wordpress site, it works correctly on desktop devices but when I open the page from mobile browser, I can see the youtube player and thumbnail of the video but I can not click and play it.
I have tried ARVE Plugin , Youtube Widget Responsive Plugin and oEmbed, all of them works on desktop but I could't play them on mobile browser (Android and iOS, both of them can't play)
Also I've tried this youtube embed code but I failed again.
<iframe width="853" height="480" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
Then I added these attributes to iframe and noting happened.
class="youtube-player" type="text/html"
So, where is the problem? I could't see anything wrong. It should work but it is not working.
Your question doesn't clears about the position of "class".
I think you are getting problem because of plugins. I would like to suggest you not to use any plugins. Uninstall all the plugins related to YouTube videos and follow the below steps.
There are some shortcut methods to embed YouTube video (works on mobile too) See here. The method you are following is similar to Method 3 in this article.
Copy that code from YouTube video.
Go to WordPress post where you want to embed this video.
Go to Text Editor and Paste your copied code inside div tag having class "video-container".
Save it.
Go to "Appearance->Editor" from WordPress left panel.
By default, style.css file should be opened. If not, open "style.css" file.
Copy the below CSS code as it is.
.video-container {
position:relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Click "Update".
Your video should become mobile clickable as well as responsive.
Related
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
I added video from media library to my page from content edit box.
no matter how i change the video size, it always on width:640px; cannot show lager in desktop display. it get smaller if view as mobile view.
I checked the CSS, not sure where to setup or change these in CSS.
My testing page now is on http://54.183.134.28/ you can check the video in about us section.
The code i checked in content edit box and CSS inspect, please help, for some reason i do not want to use Youtube, have to load the video to media library.
my question now is is there any restrict for video display size in wordpress?
[video width="1920" height="1080" mp4="http://54.183.134.28/wp-content/uploads/2017/07/City-8248.mp4"][/video]
element.style {
width: 640px;
}
wp-mediaelement….css?ver=4.8:1
.wp-video {
max-width: 100%;
height: auto;
Try to use this css code
.flowplayer{max-width:650px;}
Then let me know the result.
Thanks
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/
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.
I am trying to get a mobile version of a Google calendar to embed into a mobile website without having to log in. If anybody has gotten this to work before or has any idea how to do it please help.
Here's what I did with my site, and it works great for my Google calendar needs.
I used Google Calendar embed code, but I changed the type of calendar I was embedding on mobile so the content fits on the screen. As long as the "&mode=" equals "AGENDA" for the small container it should display the agenda list, but you can copy this from directly within your Google Calendar.
I used the "month" calendar embed option for the big container with a width set to "100%" and a height of "650" like so:
<div class="responsive-iframe-container big-container">
<iframe src="https://calendar.google.com/calendar/embed?
showTitle=0&showNav=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&height
=700&wkst=1&bgcolor=%23db694f&src=123123123%40group.calendar.
google.com&color=%23fbdbac&ctz=America%2FLos_Angeles" style="border-width:0"
width="100%" height="650" frameborder="0" scrolling="no"></iframe>
</div>
Then used the "agenda" calendar embed option for mobile devices with a width of "100%" and a height of "600" like so:
<div class="responsive-iframe-container small-container">
<iframe src="https://calendar.google.com/calendar/embed?
showTitle=0&showNav=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0
&mode=AGENDA&height=800&wkst=1&bgcolor=%23db694f&src=123123123
%40group.calendar.google.com&color=%23B1440E&ctz=America%2FLos_Angeles"
style="border-width:0" width="100%" height="600" frameborder="0"
scrolling="no"></iframe>
</div>
This will give you a responsive iFrame agenda list on mobile that can be scrolled through, while still having the large calendar view on desktop.
Lastly, you need to add these styles to the page
<style>
#media (max-width: 550px) {
.big-container {
display: none;
}
}
#media (min-width: 550px) {
.small-container {
display: none;
}
}
/* Responsive iFrame */
.responsive-iframe-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-iframe-container iframe,
.responsive-iframe-container object,
.responsive-iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
These days, there are a number of third party apps that make it easy to embed mobile-responsive Google calendars.
Here are a couple of options:
Styled Calendar
Tockify
Or, if you'd rather use something open source, FullCalendar is a great solution. They have a calendar list view that works particularly well on mobile. If you wanted the desktop and mobile layouts to be different, you could potentially use a resize observer on the calendar's container to trigger FullCalendar's changeView method. Here is some documentation on how to use FullCalendar's Google Calendar plugin: https://fullcalendar.io/docs/google-calendar
*Full disclosure, I'm a member of the Styled Calendar team
To allow everyone to see your calendar, you'll need to make it public.
And just in case, here's how to embed the calendar on your website:
In the calendar list on the left, click the down-arrow next to the calendar you want to embed, and select Calendar settings. (Alternatively, click the Settings link at the bottom of the calendar list, then click the name of the calendar.)
Copy the iframe code displayed in the Embed This Calendar section.
Paste this code into your website to embed your calendar.
The instructions above were taken from Google's Calendar Support "Embed on your website".