Recommended code for the Youtube video src - javascript

<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/5Asua4YsrEE?autoplay=1&modestbranding=0&controls=0"></iframe>
</body>
</html>
I want to ask about my code,
I want to make a video player with a source from youtube using iframe where control, title, brand disabled, and autoplay are enabled.
but after I tried it didn't seem like it worked.
Can anyone provide some help to correct my code or suggest code in some other form using js?

You can hide hide the title and the brand by setting a height for the parent of the iframe and using overflow: hidden
CodePen

Related

How to mute the sound of a webpage when viewing through iframe

<!doctype html>
<html lang="en">
<head>
</head>
<body>
<iframe src="https://www.google.com/?gfe_rd=cr&ei=4xVYV-iRE4SEoAPS2YHgAQ"></iframe>
<iframe src="https://www.example.com/"></iframe>
</body>
</html>
In the above code example.com site plays some sound I want to mute that sound. I want to mute the sound only for that site/iframe
Thanks in advance.
To my understanding, browsers don't allow you to interact with the with the DOM of the iframe embedded elements. It's possible that your whole page could be muted, and I'll try to fiddle up that solution, however, since that's not what you need, I guess you're just out of luck. #keziah suggested putting video URL in <video> tags and I am not aware of a better course of action.

How to remove any div in iframe

Hi Please tell me how can we remove any div in iframe for example my code is :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe src="http://stayupdate.net" width="100%" height="800">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
I want to remove "creditline" div or its text
<div id="creditline">
<span class=".alignleft">
</span>Designed By
Real Web Maker
</div>
You can change only if you have access(file) to that page..Otherwise its not possible to change the content of other's page.And it should be.
Don't no about your requirement but..But you can do a trick.
Create a same size div,change the content according to you requirement.
and by js or jquery put it exactly over iframe div.
Is not recommended at all,and its not reliable too.
I suppose you want to add script to your page, which removes a div tag inside the iframe. This is only possible if the page shown by the iframe (http://stayupdate.net) has a provision to do that. If you can modify the inner page, then you could add an event listener, which accepts an external command to remove a tag. The outer page can then send that command using postMessage, as described here. If the outer and inner pages are in the same domain, you can use a simple function call as described here.

Overlay youtube embed with still image, along with embedding plugin in WordPress

I'm currently developing a website and custom theme in WordPress. On some of the Pages, a YouTube video will be embedded within the Page. To make it easy to update, I've used a plugin for embedding YouTube videos so when the user pastes the video URL, it embeds automatically.
The embed results in the following HTML code:
<div class="fluid-width-video-wrapper" style="padding-top: 56.25%;">
<iframe id="_ytid_72976" class="__youtube_prefs__" frameborder="0" mozallowfullscreen="" webkitallowfullscreen="" allowfullscreen="" type="text/html" src="//www.youtube.com/embed/fNKwb6dvNTE?enablejsapi=1&autoplay=0&cc_load_policy=0&iv_load_policy=3&loop=0&modestbranding=1&rel=0&showinfo=0&playsinline=0&autohide=1&theme=dark&color=red&wmode=opaque&vq=&controls=2&">
</div>
Now, I'd like to combine this with a custom thumbnail. So basically adding an image and when the image is clicked, it will be replaced with the embed with jQuery, and the video will autoplay after being replaced. Preferably with by adding an image into a div or something, because I don't want the user to have to alter the CSS or a script each time a new Page is added.
I've seen several similar questions but I couldn't quite figure out how to make it work with this plugin.
Thanks in advance!

How to disable pdf toolbar download button in iframe

I have a web service which will return pdf stream for a given document id and I will set the content type to application/pdf and write the out put to IFRAME upto this point I am done and OK!
My problem is :
My requirement is to disable the pdf download toolbar button in IFRAME, is there any way using JavaScript or j query to disable the PDF toolbar buttons,
i tried some thing like this:
<iframe src="view/1.pdf?page=hsn#toolbar=0" width="875" height="95%" id="iframe11">
<p>Your browser does not support iframes.</p>
</iframe>
I tried setting toolbar=0 for iframe tag but it dint work.
an anyone please tell me how to achieve this ?
I hope I am not very late to reply. But here's is something you can do to prevent the users. Use iFrame to display your PDF and make sure that you are displaying using Google. I used the following code :
<iframe src="http://docs.google.com/gview?url=http://www.tutorialspoint.com/php/php_tutorial.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0">
</iframe>
Here you can simply change the url=http://www.tutorialspoint.com/php/php_tutorial.pdf and replace it by your own URL where you kept your PDF.
Use embed tag instead iframe tag:
<embed src="http://localhost/yourpdf.pdf#toolbar=0" style="width:600px; height:500px;">

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