Develop Reference

how can I use iframe for videos not from youtube in angular 8?

I am using the below code for youtube embed url and it working perfectly fine. But now I have an url which is from my sharepoint account. I want to play that but its not working. Please help me out.
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" type="text/html" webkitallowfullscreen
mozallowfullscreen allowfullscreen width="600" height="400" [src]="url">
</iframe>
previously the code for url was like stated below which was running fine and i was able to play my video
const safeURL = https://www.youtube.com/embed/${this.data?.videoID}?autoplay=0&fs=1&iv_load_policy=3&showinfo=0&rel=0&cc_load_policy=0&start=0&end=0;
this.url = this.safePipe.transform(safeURL, 'resourceUrl');
but now i want to change the url's value like this
this.url = 'https://abc-my.sharepoint.com/:v:/p/abc/EZD14y8daXNMpxefWdmVOj8BxpWcHM7RHRq6GyCb8Dv0Gw';
but now I am not able to play my video. Can you please help me out in playing non-youtube videos in my angular 8 application.

The <iframe> tag will not intelligently digest the content and output markup like your browser does when you navigate to the SharePoint's hosted video.
The Youtube embed URLs are not URLs to a video file - they have markup in them, which is why the player is different to your default browser's video player.
If you were to go to that SharePoint video in your browser and view the page's source, you'd see that some stuff gets added, but if you were to run wget https://thevideourl.com/myvideo.mp4 you would download only the video, not a html document containing a video tag which references the video.
Consider using a <video> tag with a src attribute. For example:
<!-- Instead of... -->
<iframe src="https://sharepoint.com/thevideourl"></iframe>
<!-- Do... ->
<video src="https://sharepoint.com/thevideourl"></video>
Now, the fact that it's in SharePoint raises questions as to whether or not your browser will be able to access the video at all given the above code. I am not sure if it would authenticate you properly.

Stopping Embedded Vimeo Player Asking for VR Permissions

I've got an embedded Vimeo player on my website, using the Player SDK that Vimeo provides. Something I have noticed is that on Firefox, whenever I visit the site, I am prompted to give Vimeo access to any virtual reality devices attached.
As this prompt is rather instrusive, is there anyway to prevent Vimeo asking for this permission?
For reference, this is the iframe code that I am using to embed the player:
<iframe #videoPlayer src="https://player.vimeo.com/video/(id)" width="100%" height="400px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

If you send the HTTP Feature-Policy header, you can manually override the nested frame.
One or both of the following headers should do the trick:
Feature-Policy: vr none
Permissions-Policy: xr-spatial-tracking=()

how to add video in html

I wanted to put a video from YouTube on my page, so I used a script that I copied from my blog on Google Blogger, as follows:
<div>
<iframe
id="vid"
allowfullscreen=""
class="YOUTUBE-iframe-video"
data-thumbnail-src="https://i.ytimg.com/vi/sjxDbz9HOnE/0.jpg"
frameborder="0"
src="https://www.youtube.com/embed/sjxDbz9HOnEfeature=player_embedded"
height="300"
width="300">
</iframe>
</div>
And the method succeeded with these video,
I compared the video link used to the original link and found the following:
video link used: https://www.youtube.com/embed/sjxDbz9HOnE?feature=player_embedded
original video link: https://www.youtube.com/watch?v=sjxDbz9HOnE&feature
we know that almost all YouTube videos start with the phrase: https://www.youtube.com/watch?v=
And from it the code that distinguishes the video is the phrase after it, which is: sjxDbz9HOnE
And from it to fetch any video we use the following link: https://www.youtube.com/embed/__video_cod__?feature=player_embedded
It also applies to the other link, which is about the video image, where: https://i.ytimg.com/vi/__video_cod__/0.jpg
But as I said, the method worked with me only with this video and tried to try another video, so the image of the video appears and when I click on it to play the video it does not work and displays an error message.

you should use a valid video url. your url "https://www.youtube.com/embed/sjxDbz9HOnEfeature=player_embedded" is dead.

adding youtube live streaming video to my site

I want to add youtube live streaming video to my site this is the link
https://www.youtube.com/watch?v=EGYAnAoMbmA
and this is the code but it did not work:
<iframe width="560" height="315" src="https://www.youtube.com/watch?v=EGYAnAoMbmA" frameborder="0" allowfullscreen></iframe>

As the folks in the comments suggest, you should check to see if your YouTube video allows embedding.
Google has this procedure. Briefly speaking, first sign into YouTube, then go to your Video Manager. Click Edit beside the video you want to embed, then under the "advanced settings", find the "Distribution Options" and make sure the "Allow embedding" checkbox is checked; otherwise the embed will not work.
The good thing is that there appears to be no problem with your embed code, so it should only be a matter of making sure your video is even embeddable.

iFrame fails to load in iOS Safari until reloaded

I have a simple iframe which is used to display a vimeo video on my site, as so:
<div class="video">
<iframe src="//player.vimeo.com/video/88893424" width="960px" height="540px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And it works like a charm on all standard computer browsers. Ajax is used throughout the site, and transitioning between pages that have videos and don't work exactly as you would expect - Ajax grabs the new page content, slides it on, deletes the old content, and the video works perfectly.
However, on iOS Safari, the video does NOT load. The space for the video is reserved - the other content on the page flows around the area where the video should be, which tells me the div is loading, and the height and width information of the iframe element is being registered by the browser. But no video, nothing. Reload the new page, though, and the video is there and plays just fine.
So my question is: Why is the reload required? What could I be doing wrong that is causing the AJAX to fail? I have read several answers across SO that seem to incriminate header information and cross-site drama, but it is danced around and not explained. Can anyone give me a clear understanding of what's going on here?