I'm wanting a video to play automatically once it loads on a page. The video has no sound so shouldn't annoy the user too much.
The official YouTube answer for this query is to add &autoplay=1immediately after the video ID, and while that works in this CodePen test, it isn't working on my actual website page.
Elsewhere on Stack Overflow I've seen someone suggest that replacing the & with ? would work, however, doesn't work for me. (It doesn't break the video, it just still doesn't autoplay).
My embedded YouTube video
<div class="background-video" style="background-color: #ebebeb; height: 655px;">
<iframe width="100%" height="655" src="https://www.youtube.com/embed/bdw7V0vzQCs?&autoplay=1&rel=0&controls=0&showinfo=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
The site is built on Wordpress and is currently hosted locally on a MAMP server.
You should put ? in front of autoplay only if it's the first attribut added to your youtube url, otherwise you should use &.
Like so : your-url.com?autoplay=1 or your-url.com?key=value&autoplay=1
In your case you have ?& that should be replaced by only ?.
Your code is correct, i check video is auto playing create a new php file and check adding your code.
May be have some problem with site.
Related
So basically I recently made a video for a assignment and I copied the embedded code from You tube and pasted it in Brackets.io and after I clicked save and then pressed live preview it didn't work and when I went to the website that shows you the many reasons why live preview won't work one of those reasons was
"Bug #7935: Live CSS does not update if page contains an iframe (including injected iframes such as ads or social media buttons)."
So how do I fix this?
If Anyone knows please reply back to me!
I suppose you use for embedding a video a kind of code like this:
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
I usually use this for holding videos in my webs, so if this still gives you problems, you should use another editor, maybe Visual Studio Code and install an extension call Live Server by Ritwick Dey, which does the same as Bracket's Live Preview.
i have a wordpress website and i am using iframe to embed youtube video. Issue is when i click on fullscreen icon of video, my page with whole content go in fullscreen mode.
Its a weird issue and i have worked hours to solve this issue. Please check this link.
website link
using my code as:-
<iframe width="640" height="360" src="https://www.youtube.com/embed/Di7G4nbpyDg?feature=oembed" frameborder="0" allowfullscreen></iframe>
i know direct website links is not acceptable but this is something need to fix. Any response will be appreciated.
Thanks
On Wordpress use [youtube https://www.youtube.com/watch?v=XX11XX11X]
xx11xx11x is only example.
Wordpress wants to keep sites prtoected from iframes. So you are not able to publish <iframe>s.
Did you got it?
Edit: In your case use: [youtube https://www.youtube.com/watch?v=Di7G4nbpyDg]
like this:
I have no permission to show you the full video link.
Not really sure if I can ask this so I hope its ok. I have my site where I would like to embed and play video which is stored on OneDrive cloud service. So far it sounds easy, however here's the thing: while I am actually allowed to embed it via provided embed iframe code, it can't be played unless its redirected on OneDrive site. I did my research all over the internet but it looks like dead end and no one really solved this mistery. This is what I got:
Official embed link:
<iframe src="https://onedrive.live.com/embed?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21141&authkey=AM3Y3EuRuTPbKo0" width="320" height="240" frameborder="0" scrolling="no" allowfullscreen></iframe>
This embed is not playable from my site. after I press Play button it will redirect me to:
https://onedrive.live.com/redir.aspx?cid=5fac7d8a540d1b7a&resid=5FAC7D8A540D1B7A!141&parId=5FAC7D8A540D1B7A!140&authkey=!AM3Y3EuRuTPbKo0
then here:
https://onedrive.live.com/?cid=5fac7d8a540d1b7a&id=5FAC7D8A540D1B7A%21141&sff=1&authkey=!AM3Y3EuRuTPbKo0
and finaly here where I can play it:
https://onedrive.live.com/?authkey=%21AM3Y3EuRuTPbKo0&cid=5FAC7D8A540D1B7A&id=5FAC7D8A540D1B7A%21141&parId=5FAC7D8A540D1B7A%21140&o=OneUp
Official share link:
https://onedrive.live.com/redir?resid=5FAC7D8A540D1B7A!141&authkey=!AJVBaVimMA1e0cc&ithint=video%2cmp4
From this I found a way how to create direct download link by changing redir part with download:
https://onedrive.live.com/download?resid=5FAC7D8A540D1B7A!141&authkey=!AJVBaVimMA1e0cc&ithint=video%2cmp4
It can be put into <iframe> or <video> but it still can't be played. Also is possible to change redir to embed:
<iframe src="https://onedrive.live.com/embed?resid=5FAC7D8A540D1B7A!141&authkey=!AJVBaVimMA1e0cc&ithint=video%2cmp4" width="320" height="240" frameborder="0" scrolling="no" allowfullscreen></iframe>
which is pretty much same as official embed link. Then there are also strings like: &em=2 and &Embed=1 (not really sure what they stand for, but they do change redirected output) Example:
https://onedrive.live.com/embed?resid=5FAC7D8A540D1B7A!141&ithint=video%2cmp4&em=2&Embed=1
From what I understand these listed strings can be always skipped:
?cid=5FAC7D8A540D1B7A
&authkey=AM3Y3EuRuTPbKo0
&ithint=video%2cmp4
&id=5FAC7D8A540D1B7A%21141
&parId=5FAC7D8A540D1B7A%21140
&o=OneUp
With this, I am at point where embed is not embed at all. Its like new word to "redirect me to OneDrive and play me there". Ofcourse I also tried to get help at OneDrive support, but they play stupid! and keep asking me why would I need to play my video on my site when I can play it on my drive just fine. Apparently they mocking me. I am not really tryin' to use them as my ftp server (and even if I would its not their bussines till I violate their code of conduct), I just want to play my embed video on my site like I would with Youtube, Vimeo or Dailymotion. (Well, to be honest it wouldnt bother me so much if I wouldnt already purchased 2TB storage)
I in the end I looking for "true embeding" or at least "direct link" like I found when it comes to images: http://1drv.ms/1PbOhF8 where direct link is: https://u6gkqq.dm2303.livefilestore.com/y3mtdqmTctG9LFmZ_HLl1tYgUkWTiB8xkCZ0-nOKP2_SLzkuVXtzJzhavaA8axBWlqrVezVbDjA4bO-8AJjbVSp_Yc3luKWSiMVuhvRhnvYFie_FfOEQldmztKVtOlxGrG18AIftsAbOwfXORrB8TZ1EPZYFmKQ6KfmA8Q2TWqStxE/%D0%9D%D1%8C%D1%8E-%D0%99%D0%BE%D1%80%D0%BA-%D0%B0%D0%BC%D0%B5%D1%80%D0%B8%D0%BA%D0%B0-%D0%BA%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D1%8B%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-Tilt-Shift-2344711.jpeg?psid=1
I mean, there must be a way how to actually get direct link of stored file even if its video, right?
I even tried to insert video into my desktop MS PowerPoint 2013 and then upload it on OneDrive, get embed code, place it on my site and play it on my site. Problem is that such embed presentation can be viewed only by me and also only outside of fullscreen mode (entering into fullscreen will lead to redirect on OneDrive again). Here I attach share link + embeds:
http://1drv.ms/1Z33Xox
Embed from online OneDrive storage:
<iframe src="https://onedrive.live.com/embed?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21143&authkey=AMrmlVIx_LeyX_g&em=2" width="402" height="327" frameborder="0" scrolling="no"></iframe>
Embed made from embeded embed:
<iframe src='https://onedrive.live.com/embed?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21143&authkey=AMrmlVIx_LeyX_g&em=2&wdAr=1.7777777777777777&Embed=1' width='402px' height='327px' frameborder='0'></iframe>
Now, interesting is that for playing this presentation is used native HTML5 player. While on "share link" right-click menu is disabled (with oncontextmenu="javascript:return false;"), but while in embed mode, right-click menu is enabled however there is missing fullscreen on controls (allowfullscreen). Unfortunately video cant be saved or opened in new tab, because it will trigger downloading of some "mediahandler.ashx" file which is infact my video file with renamed extension! This is the address:
https://powerpoint.officeapps.live.com/p/mediahandler.ashx?PV=6&PF=5&Fi=SD5FAC7D8A540D1B7A!143&C=5_810_DM2-SKY-WAC-WSHI&ak=t%3D0%26s%3D0%26v%3D%21AMrmlVIx%5FLeyX%5Fg&z=257&usid=9992f846%2D2470%2D4a99%2Da07d%2Da26ffa761de7&Rid=2041958409%2Emp4%2Emedia&waccluster=DB3B&retries=3
which will redirect here and trigger download of ashx file -
https://powerpoint.officeapps.live.com/p/mediahandler.ashx?PV=6&PF=5&Fi=SD5FAC7D8A540D1B7A!143&C=5_810_DM2-SKY-WAC-WSHI&ak=t%3D0%26s%3D0%26v%3D%21AMrmlVIx_LeyX_g&z=257&usid=9992f846-2470-4a99-a07d-a26ffa761de7&Rid=2041958409%2Emp4%2Emedia&waccluster=DB3B&retries=3
any ideas, please ?
use video tag and in src attribute use the src value of iframe and change embed to download.Hope it will work.try it.
<video controls width="360" height="240">
<source src="https://onedrive.live.com/download?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21141&authkey=AM3Y3EuRuTPbKo0" type='video/mp4'/>
</video>
I clicked on your Official Share Link and in the top menu there is an item for "View Original" which, after clicking, takes me to the direct download link:
https://u6eqtg.dm.files.1drv.com/y4mFkEomS8JzzREaa-IhXyseplbhCfA84Z6hcTSQXf84jFDR5_9J1PSSulKVzZqfLBs_wGqombsF45k4k3P_pZky7a1t0XOPEduQFQlhog8VshPfMzcue76CBDxU_Uz37zFAadc5gkokilYAHz5iq_FCSbgV6ago5AP8Vj5bkEb_37O5LwIooZAEQtOwa89zcAH12SNGGnW5kDX_2buZxcZbxAzOzfgPOVZHCMbkjZsr5Y/Pilobulos_Symbiosis_2005-480p.mp4?psid=1
By the way, if you have a folder full of files that require a direct download URL, I found that this answer is useful for grabbing all the direct links in a shareable folder.
Came across this which worked https://blog.omaration.com/embedding-videos-from-onedrive-into-your-blog/
Basically: take the embed src= value and use that in your HTML5 video src=, but change ?embed to ?download.
Here is my embed code:
<iframe width="1920" height="1080" src="//www.youtube.com/embed/2JkquK7PJ-c?rel=0&color=white&modestbranding=1&showinfo=0&wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>
And here's how it's showing.
The video upload is 1080p and the poster image was chosen from the video (though I had the same issue with one that was a custom image) so I'm not sure what's missing.
Yes, this appears to be across all YouTube embeds. If it really bugs you, like it does me, I'd suggest showing the thumbnail and then swapping it out on click to the video with autoplay on. I wrote about doing this using jQuery years ago here: start/play embedded (iframe) youtube-video on click of an image
Your thumbnail is avaialble at: http://img.youtube.com/vi/YOURVIDEOID/maxresdefault.jpg
I was tidying up an AngularJS YouTube directive when they made this switch and I spent half an hour trying to figure out what I'd done to create that black border around the thumbnail until I looked around the internet at other embedded videos and noticed that it was YouTube system wide. Heh.
No idea why YouTube decided to do this, it looks horrible.
Try setting the iframe size using css, initially inline like this:
<iframe style="height: 1080px; width: 1980px" src="//www.youtube.com/embed/2JkquK7PJ-c?rel=0&color=white&modestbranding=1&showinfo=0&wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>
If this works, neaten it up by giving the iframe an id and then add the dimensions as a rule to the external css file.
we were embedding facebook videos in our website using iframe, it was working fine before, but from last few days site is not able to load video. we have tried it with simple web page as well but no luck. below is the code we are using
<iframe src="https://www.facebook.com/video/embed?video_id=video_id" width="650" height="400" frameborder="0" allowfullscreen></iframe>
please let me know if anyone can do a quick help
Just Use this link. It worked for me. "http://www.facebook.com/video/embed?video_id=XXXXXXXXXXXXX";
where XXXXXXXX is your facebook video id.
eg:
Facebook Sample Video:
<iframe src="http://www.facebook.com/video/embed?video_id=10152463995718183" frameborder="0" width="100%" height="100%">
You need to use this link now :)
https://m.facebook.com/video/video.php?v=xxxxxxxx
OLD ANSWER
the problem isnt that the video is not embeded but that it is not in an iframe correctly stretched. Cca a week before facebook has changed the embed link and video is not stretch to screen width and it cant be done in this fashion. I havent find a solution how to fix it yet.
Maybe there is a possibility to gut out mobile version of the video which is even in HTML5 ... problem with that approach is that the video is available only for a limited amount of time (cca 2 hours) .. then the link will expire and you need to click on a facebook video again which will create a different video.
Example here - https://m.facebook.com/story.php?story_fbid=751234308276798&id=643601645706732&_rdr
Try to use this URL: https://www.facebook.com/v2.3/plugins/video.php?allowfullscreen=true&autoplay=true&container_width=800&href=https%3A%2F%2Fwww.facebook.com%2Fredbull%2Fvideos%2F10155801793140352%2F&locale=en_US&sdk=joey
It's better then the embed url. The video fits in viewport.
did you try to embed different video? the video you're trying to embed may have been remove or hide so it can't show on your site. try embeding a sample video. if it appear the problem is on your video.