Hello dear Stackoverflow people!
I have tried to build myself a website, there us just one thing i can't figure out and im hoping you way more experienced people could help me.
The embedded Youtube video, which is meant to serve as a background for the logo works well with FireFox and Google chrome. Just in Safari, the video skips straight to the end and the other recommended videos as soon as the page has loaded. If i open just the youtube.com/embed/ link, it works fine. Is there any way for me to resolve this?
I am not an expert concerning html5 / javascript and i have no idea why it behaves so differently in the different browsers.
I have tried to open the embed link on its own, it works when doing that.
I have also tried looking into the developer menu in safari, but there are no errors.
Sometimes, it loads wrong and if i change the tab for a few minutes and reopen the tab it gets rendered again(?) and then it works; it just never works when you load the page initially
<iframe id="videobgframe-1936929286" class="videobgframe" style="min-height: 708.1875px; min-width: 956.4444444444443px;" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/XzTCntGgNJU?modestbranding=1&autoplay=1&controls=0&wmode=transparent&hd=1&rel=0&autohide=1&showinfo=0&origin=https%3A%2F%2Fwww.ajgapps.com&loop=1&playlist=XzTCntGgNJU&enablejsapi=1&widgetid=1"></iframe>
The expected/desired result is the website behaving just like it does in google chrome and firefox right now, starting to autoplay the video as the logo background when the page has loaded, hiding controls, looping the video and ideally also hiding the recommended videos.
To anyone wondering, I have figured it out finally.
Safari blocks all autoplaying media by default, exempting certain big websites like Youtube or Netflix.
So there is no way around this, if you want to use a video. I will try to use a different media format like a gif maybe...
Related
The weird thing is, is that it doesn't happen all of the time. Most of the times it works perfectly fine, but sometimes it justs shows this until I refresh the page.
<iframe src="https://www.youtube.com/embed/Q58Ybvy7F1I?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1&playlist=Q58Ybvy7F1I" frameborder="0" allowfullscreen autoplay></iframe>
I am stuck!
I have one site hosted on Github Pages that successfully embeds a YouTube video. I'm in the process of building a second site for public release and would like to include an embedded video on this as well. The embed works locally so I know my code isn't the issue, but Github refuses to display the video on this second site. More detail below, including specific code.
Site with working Youtube embed: https://greattimeband.github.io
New site (work in progress): https://gr8time.github.io
The old site displays two videos in the lower left, embedded and fully functioning. The second site does not display the video (just under the carousel up top) but seemingly recognizes the element as existing. There are a few variables that may be at play here:
Site #1 was built using Webflow and may have some inherent styling or containers that I am unaware of. I scoured my css for any clues but can't seem to find any. This embed is also pointing directly to a specific video rather than calling upon the "most recent upload"
Site #2 is being built with Bootstrap. The embed is also calling upon the most recent upload on my channel rather than a specific video (so the site should update itself with each new upload).
Either of these factors may be contributing, but I'm wondering why Github does fine with the first example and not with the second. I understand Github Pages may not allow embedding of videos at all, which makes the first example even more interesting. Wondering if there may be an explanation on either side and if my inadvertent success on the first site can be replicated (without using Webflow).
Site #1 embed code (working):
<div class="video-div-block">
<div class="video-row w-row">
<div class="column-5 w-col w-col-4">
<h2 class="heading-2 video">Video</h2>
<div style="padding-top:56.17021276595745%" class="w-video w-embed">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/4PSGaDSS8A4" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div style="padding-top:56.17021276595745%" class="video w-video w-embed">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/cV4NthqdXRM" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
Site #2 embed code (working but not displaying):
<div class="video-container">
<iframe src="http://www.youtube.com/embed/videoseries?
list=UUJhHaq56JKvZlAQ32OH71nQ&index=0" frameborder="0"
allowfullscreen>
</iframe>
</div>
The second example displays properly and pulls the correct video locally, but Github refuses to display content. Any help is greatly appreciated!
Please change iframe src http to https like:
<iframe src="https://www.youtube.com/embed/videoseries?
list=UUJhHaq56JKvZlAQ32OH71nQ&index=0" frameborder="0"
allowfullscreen>
There is plenty of information on this and the fix of setting autoplay or autostart to false seems simple.
Only it doesn't work for me at all, have tried every combination can think of.
I am embedding video in layer slider slide in wordpress and the video playing is stopping slide from transition to the next one.
Any help would be appreciated.
Below are some examples of various ways I've tried to make it work. It is the same issue on chrome as on safari, and mobile
<iframe width="560" height="315" src="https://www.youtube.com/embed/PhCLPGg2WOM?autoplay=0” frameborder="0" allowfullscreen=“></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PhCLPGg2WOM?autoplay=false" type="audio/mpeg" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/tUJJv0EZSuI" frameborder="0" allowfullscreen autoplay="0" autostart="0" type="audio/mpeg"></iframe>
Go to slider settings, and turn off the autoplay mode under "Video" section. since it is not working on the code it self. Check the link given below, will be useful.
https://wordpress.org/support/topic/stopping-autoplay-on-iframe-videos/
I have done some research on your problem, however I don't personally have a WordPress premium account of which I can test. So, what I do know is that your disable auto-play code does work on Chrome in a normal HTML setting. I found this link that might help:
https://www.youtube.com/watch?v=26QOdyxeYfY
However, it looks like you might have already tried that solution. I have also found another link (http://www.kriesi.at/support/topic/layerslider-youtube-video-autoplay-issue/) that says that the LayerSlider plugin has its own auto play settings under Slider Settings>video.
I hope this helps!
The Layer Slider plugin has its own slider settings for each slider. Go to the Slider Settings > videos, and under videos tab turn off the Automatically play videos options.
Edit the slider then go to Global Settings. Go to Slideshow panel and turn off “Automatically play videos” option.
Remove autoplay=0 and try it out in your embed url at the end there is autoplay=0 or other numbers remove it and try it out
I am very ignorant in this area. I wanted to embed a video in my website. I just went on w3schools and copy-pasted the example code.
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
Why does the video than not show in the website? I am using Google Chrome.
EDIT:
The problem was that I was using the real youtube address instead the URL for embedding.
it's actually works perfectly, checkout the other code, may be the iframe is hidden by any other controls
I've checked all the questions and answers in stackoverflow but I can solve my problem.
I'm trying to embed a youtube video in my website(on desktop, static) but it only shows me the video that is in the w3cschool example or doesn't show me anything(not even a blank box).
This is my code but for some reason it's not showing the video I choose on Youtube and yes I did use the embedded code from youtube.
<iframe width="300" height="300" src="//www.youtube.com/embed/yiboIS-f27Q?rel=0?html5=1" frameborder="0" allowfullscreen></iframe>
Does anyone know why?
Found the solution.
I just had to add http: in front of // in the youtube url.
Answer found from the answer of Nick R in the question
Youtube embeded video not working in all my browsers: FireFox, IE and Chrome