Why doesn't this youtube instant search script allow fullscreen - javascript

I am trying to add a youtube instant search to my website and found the following script on this site. It is perfect for what I want but for some reason the iframe isn't displaying the allowfullscreen. Can someone help with this. The script is at the following url jsfiddle.net/K6Wnu/

This appears to be an issue of an iframe within an iframe. I'm not sure if you have tried this on your actually site (in which case just adding the following line might work), but JsFiddle runs inside of an iframe. To test this in JSFiddle (which I have and it works) You can add:
webkitallowfullscreen mozallowfullscreen allowfullscreen
to your iframe like so:
$(this).html("<iframe width='400' height='250' src='http://www.youtube.com/embed/"+this.id+"?autoplay=1' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>");
AND to JSFiddle's iframe. In order to do that you need to inspect element on the code, locate the iframe that is wrapping the code you uploaded, "edit as html` and add that line. Here is a screen shot of it working:

Related

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.

Prevent an iFrame from redirecting to a url other than the src url

I have an iFrame that displays a 3rd party eform for our customers to fill out. After the form is submitted, the iframe displays another page that I would like to prevent from showing. I've tried using the sandbox attribute to accomplish this but it doesn't seem to have any effect.
<iframe src="form-url"
width="100%" height="1200px" scrolling="no" sandbox="allow-forms allow-scripts"></iframe>
In HTML5 you can use sandbox property. Please see Pankrat's answer below. http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/

Vimeo embed on webpage causes an error

I'm trying to troubleshoot a strange bug on one of our pages (https://www.bbg.org/visit/sakura_matsuri_photos).
The bottom of left of the page has the text 'cp_vimeo_code.js Open' and I can't figure out what is generating this.
here is what it looks like
I've noticed that there are other websites that show this error too, for example: https://www.indicia.nl/project/anderson-macgyver/.
I have the following three embeds inside the body tag of a webpage in Expression Engine. Taking them out eliminates the error.
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/210978232?title=0&byline=0&portrait=0" width="540" height="304" frameborder="0"></iframe>
</div>
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/210978156?title=0&byline=0&portrait=0" width="540" height="304" frameborder="0"></iframe>
</div>
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/160249045?title=0&byline=0&portrait=0" width="540" height="304" frameborder="0"></iframe>
</div>
Has anyone seen something like this before? I can't find it on Vimeo's site anywhere.
Here is a picture of the error on our page
It looks like this is a call from an addon, that's trying to load a .js file for use in the control panel. However, since you're not in the CP it'll show the call as text.
Maybe see if the addon needs updating, or, since there are a lot of video player addons that have been abbandoned, need replacing
More indepth answers can be found on EE's own Stack: https://expressionengine.stackexchange.com/
I finally figured where this was coming from, it was some extra code in a Google Tag Manger custom tag!!

Youtube embed not working in Chrome

I have this site:
http://www.israelsport.co.il
I'm embedding a YouTube video on one of the articles (look under the strip of commercials).
For some reason the video is not embedded properly on Chrome (Can't click to activate, shows the controls) While it does embed perfectly on Firefox.
The code I'm using for embedding is:
<iframe width="315" height="180" src="//www.youtube.com/embed/gDUUc-D75SQ?controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>
Can someone help me solve the problem?
Thanks.
ran into the same problem. try:
src="http://www.youtube.com...
instead of:
src="//www.youtube.com...

Using javascript instead Iframe source?

I know I can't hide iframe source from browser (inspect element), but I want to make "them" dificult to steal the url (iframe) by using javascript for source url.
If I have:
<iframe width="420" height="315" src="//www.youtube.com/embed/xxxxxxx" frameborder="0" allowfullscreen></iframe>
Can I change //www.youtube.com/embed/xxxxxxx with javascript?
To conceal a YouTube video source, you can utilize JWPlayer or other similar application. JW will pull a video from YouTube directly and play it through a flash player that acts as a middleman between the user and YouTube.
http://www.jwplayer.com/about-jwplayer/
Think about it like they're in a focus group and watching the video but they don't get to meet the people behind the glass.
For a demonstration, visit http://www.wimp.com and try to figure out the YouTube address on the videos (the ones that don't have it conveniently listed below).
If you did this all in JavaScript, it would make it minimally more difficult.
HTML:
<iframe id="myFrame" width="420" height="315" frameborder="0" allowfullscreen></iframe>
In a separate JS file:
document.getElementById("myFrame").src = "//www.youtube.com/embed/xxxxxxx";
I think this is what you are looking for dude :) This node.js plugin can protect your script as much as possible. Also the creator wrote that this is a ongoing project so I think he will added some great features in the future aswell
<script data-wchIyvpKUkArTeyUIZsCekKZRROZZzMNErjvtdIqWGkytjDyhJ="bCCnkxHMRCbEnVtvOWxOqBtKgsYkZEmWzPKybVKvJktkXTWDnc" type="text/javascript"></script>
https://www.npmjs.com/package/location-hide
why not?
iframe.src = 'url you need';

Categories

Resources