I've done several hours of troubleshooting, and a couple more searching for an answer, couldn't find any, although found some other people with the same problem.
The problem is that when I try and load the page ( http://reinbeerclub.com/ ) on a mobile device (tried android and iphone) the play button goes to the left upper corner and it stops working. so when pressed it doesn't play the video.
i am using the yootheme digit theme wich is based on uikit on a wordpress site, and the MediaElement.js built in.
the code I am using to display the video is:
<video poster="/wp-content/uploads/video.gif" controls class="uk-responsive-width">
<source type="video/youtube" src="http://www.youtube.com/watch?v=tQE919Uc0E0" />
</video>
(basic HTML5) but I can't get it to work on mobile devices.. can anyone help?
Here is a screenshot
Related
My Youtube embed appears in Chrome and Firefox, but it doesn't appear in Safari (which includes mobile Safari on the iPhone). I get the same result using Vimeo or native HTML5 video - nothing appears in this div. Here's a 1-minute video that shows exactly what's happening:
https://www.youtube.com/watch?v=YnqDlmYOKW8
I tried z-index, position, changing the width and height of the iFrame, changing https to http, removing encrypted-media in the embed code, and so much more.
The website is https://waltrib.com/shop/ and the test product is "Heavy Dirt". I'm using a plugin called Booster Wordpress that allows me to change product images into custom HTML (so I'm using it for Youtube embeds).
At 0:48 in the video above - what's bizarre is that when I open the Developer Inspector and add anything like www then the iFrame appears. Weird. When browsing in Safari, it renders Youtube embeds on every single page of the website, except for the /shop page.
I read this stackoverflow which suggests using object but that didn't work.
Has anything seen a bug like this? It's one of the strangest things I've seen recently.
Instead of :
src="https://youtube.com/embed/5i9SzaumaRg"
Use:
src="https://www.youtube.com/embed/5i9SzaumaRg" // Note the "www"
Sounds silly, but works.
Update:
It seems a change in URL of any kind refreshes the iframe and hence it appears so following would work:
let i = document.getElementsByTagName("iframe")[0];
i.setAttribute("src",i.getAttribute("src")+"?r=4535");
Execute this code only after iframe is loaded. Use load handler for that.
Try adding parameters to iFrame src link:
<iframe src="https://youtube.com/embed/5i9SzaumaRg?enablejsapi=1&origin=https://example.com/" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
More on my answer here.
I'm using Revolution Slider in WordPress and I'm running into an issue where on mobile devices, I cannot unmute YouTube videos. I have videos in the slider to be muted on load in and to autoplay. I have interaction and controls both allowed. However, when I try to click the unmute button on the screen, it simply pauses/plays the video. I'm not sure if the pause/play button that appears somehow overlaps and the YT controls are underneath or something. It actually doesn't look like the controls generated from YouTube but instead the RS native controls. I tried turning controls and interaction both off but unsurprisingly, this causes absolutely zero action to happen when you click/press on the video, not even pause/play it.
You can view the issue in action at http://www.hagentertainment.com. The slide in issue is slide #2 out of 3.
Being an issue related to mobile and iframes makes it relatively difficult to diagnose with 100% efficacy. I used Browerstack to open a connection on a Galaxy S20 and noticed the issue as you described.
Using the Dev Tools, I was able to get it to allow the mute button to be clicked by changing the &enablejsapi=1 to &enablejsapi=0. You can see in this screenshot below that after doing that, it allowed it to be clicked. You also have a JavaScript parse error showing in the console - that could potentially be preventing a JS API controller (built into Revolution Slider?) from functioning correctly.
So it looks like your options (for the moment) are to fix that JS error and see if it works, or disable the JS API in the url of the videos
On my webpage there is only a video. It is playing well on Edge but not on Mobile Device and Chrome.
the video is .mp4
autoplay is disabled
I am using OceanWP theme but I tried also Astra theme without any success
I am using Elementor to edit the page
There are many questions on this topic but none of them has a solution that fixes my problem.
EDIT
From the official Apple WebKit documentation (iOS):
Starting in iOS 10, WebKit relaxes its inline and autoplay policies to
make these presentations possible, but still keeps in mind sites’
bandwidth and users’ batteries.
By default, WebKit will have the following policies:
video elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
video muted elements will also be allowed to autoplay without a user gesture. If a element gains an audio track or becomes un-muted without a user gesture, playback will pause.
https://webkit.org/blog/6784/new-video-policies-for-ios/
As for Mobile Chrome (Android):
Muted autoplay for video is supported by Chrome for Android as of
version 53. Playback will start automatically for a video element once
it comes into view if both autoplay and muted are set, and playback of
muted videos can be initiated progamatically with play(). Previously,
playback on mobile had to be initiated by a user gesture, regardless
of the muted state.
https://developers.google.com/web/updates/2016/07/autoplay
Example:
<video id="myVideo"muted defaultMuted autoplay playsinline controls>
<source src="myVideo.mp4" type="video/mp4">
</video>
Your video preview shows the video file is not working. You should see a thumbnail of the video file such as this:
I'm not sure why, but it could be that the file on the server was moved/renamed/deleted since you added the video to this page. One explanation it is working on Edge but not mobile is perhaps the image was cached previously on the Edge browser.
If you remove the image and try to re-add it through Elementor, can you reproduce the problem?
Another idea is you may have a slightly corrupted video file. Try editing it in any video-editing program (several free online ones) and see if exported file works in your page.
Very strange. I uploaded the video in all three formats: .mp4, .ogv & .webm. It just won't play in chrome. In Safari and Firefox, it works just fine. The strange part is: it used to work fine until yesterday and it still works fine if you click on another link on my site and then go back.
I'm using the Salient theme on WordPress.
Link to the site
Does anyone have an idea why?
It's due to Chrome's new autoplay policy - it will not autoplay videos on first load unless the video is muted. Can you add 'muted' to the video attributes?
Source: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Edit: there should be a 'Mute Video' option in the Video Background settings of your row.
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. :)