I am adding a YouTube video to a wordpress site using the 'visual composer' video player from WPBakery. I cant really post the site because its private. But I am new to 'Visual Composer'.
I added the relevant you tube video to a 2 column 'row' on the right using the VC video player. It all works fine on desktop, but as soon as you narrow the browser so its in 'responsive' mode like the width of a mobile/tablet lets say 700px the you tube video stops working...
You can see the YouTube background image but you cant rollover with the mouse to start/activate the video, almost as though the video itself is not present and only the holding image.
Does anyone know how to configure settings so you can activate the video on mobile/tablet as well? As far as I can see I have not tabbed 'hide on any device' so any help would be welcome. It maybe that its a fault with the theme but as I am new to VC am hoping there is some setting that will solve the issue.
You can re-enable the video by adding the following css to the page:
.vc_video-bg.vc_hidden-xs {
display: block !important;
}
I finally found one solution that worked for me and I hope this might work for someone else as well, so here I go:
I used Revolution Slider and created a separated slider for each "div" element I wanted to have with a background video in fullscreen.
Then I added one video layer, choosed the source type and inserted ID of video.
I basically followed this explanation on this website: https://www.themepunch.com/revslider-doc/video-layers/
I hope this helps future users as it helped me. :)
Related
I've been looking to use various Youtube video plugins on my Wordpress site in order to be able to automatically make the videos responsive.
Using the standard iframe embed code from Youtube will display the videos fine. Proper paragraph is added relative to the text below. This happens automatically. So, when I use or to display images or videos, all is fine with proper paragraph.
Strangely though, if I use brackets/shortcode or to display image or video, paragraph is not respected.
I tried this on my other page which uses the same theme and the same page builder and all works well there, so obviously something is broken on my site.
For me this is like looking for a needle in a haystack, but I have tried disabling the plugins one by one which did not help. I've also tried to look in my child theme css where I do the changes, but could not see anything directly that seemed related to this.
Any suggestions what else I could try?
I just made a website using a Wordpress theme and it all works good on desktop computers. However, while the site initially loads normally on my phone (I'm using iPhone 6 with iOS9, but the problem is the same on Android phones too, I tried two), once I click on the portfolio item, it loads a blank page (header and footer only).
When I tap on the address bar, I notice that it never went to the right link at first place (the portfolio item link), it just shows the homepage link and there is no content.
I managed to fix the problem by entering the external URL in portfolio item options. It was still internal link from the site but I made the link open the new tab (if it doesn't open new tab, the problem stays the same). However, if I choose to go back to the homepage from that link (the portfolio item link), the homepage is blank, there is only header and footer so the problem returns again.
Just so you know, the first portfolio item contains the external link outside the Wordpress and that one opens normally.
What is wrong with the mobile site?
The site URL is: http://svenharambasic.com
The screenshot is attached. Thank you!
P.S. There are also google ads showing, I never encountered that before, but I'll work on that once this is solved.
I only see a white screen upon clicking any of the homepage portfolio image links (except for the first link which goes to an external site in a new tab) on desktop and on mobile actually. There is a content_inner class with inline styling setting visibility:hidden.
It's unclear to me why it's doing that- maybe to remove focus from the body and draw focus towards something that is supposed to appear in the foreground but does not? If I remove visibility:hidden from the element in the browser, I see a series of additional images appear, which seems to me to be more an expected behavior. Are we on the right track?
I managed to solve this, it was the setting in the theme options; I had to disable grid lines... I can't say I truly understand why, but it worked!
We have used "Revolution Slider" in my site, On slider image we have added YouTube video layer and video is auto-play but video playing is completed it's doesn't automatically go to next slide.
Site URL : http://garyskyner.com/
We have already applied settings in slider when video play is completed it's go to next slide.
when you have buy the plug-in give you one code you can use to ask to the assistance, it's good and sure can help you.
If the first video when finish restart could be the second video have some problem to compatibility. If not sure you need check the setting because i have use and don't give me this problem.
I am at a loss with why one page on a site that just went live is misbehaving on iPhone (and possibly others at 320 to 480 px wide.
I have used various simulators that have never let me down before (screenfly & iphone5 simulator) plus I have tested the responsiveness using browser resize and for some reason none of these methods can replicate the issue so I cannot find a way to correct the problem. I have cleared my cache and tried from a different phone.
The Problem:
Visit (site removed) from a phone and notice that this is the only page on the website that does not fill the devices screen. Visit any other page and you will see that the rest all fill the page normally.
If someone can point me in a direction to reproduce the problem (not on a phone) where I can access developer tools I should be able to correct the problem on my own.
I have tried reviewing my code to see what is different about that page in comparison to every other page and cannot find what appears to be causing the problem.
Some help would be gratefully appreciated.
Thank you in advance.
In Google Chrome on Phone it's ok!
Check your settings about responsive and specific browsers settings in CSS..
Good Luck, please give photo from Phone.
Okay, I found the issue. Was able to find a div element with in the contact form that had a fixed width and although the content within the form was properly set the div was pushing the entire page over.
I'm working on a website and i use a wordpress plug-in that embeds youtube videos.
Now it has this great option to show only an image of the video and load the video only if you press the video so the page won't take a lot of time to load.
The problem is that in that mode it takes that video photo from youtube and it also takes a big, red, play button image that is ugly as hell :)
Now that button's css is coming from some external link (http://s.ytimg.com/yts/cssbin/www-embed-vflSBO3VV.css) and i don't know how to over ride it.
Any suggestions?
That is the site i'm working on btw - http://www.lab.gezerweb.com/ClipPress/
Thanks.
I believe you're talking about an embed that uses controls=2, correct? (See https://developers.google.com/youtube/player_parameters#controls)
If so, then no, there's no way to override the default play button in the cued state.