I am putting this Iframe up on my website. The problem is when you click the link it opens in a new tab. I would like to open it in a light box so it doesn't navigate away form my site. I tried adding target="_parent"but it didn't work. Is what I am trying to do possible?
<iframe width="500" scrolling="no" height="400" frameborder="0" target="_parent" src="https://www.freemedicarereport.com/comparison_form/aaibsolutions.com?bg_color=9DB3DC&cta_color=E6EBE0&plan=F"> </iframe><div class="tve_iframe_cover"></div><div class="tve_iframe_cover"></div><div class="tve_iframe_cover"></div><div class="tve_iframe_cover"></div><div class="tve_iframe_cover"></div>
The target is a property of the link not of the frame containing the link.
If you want to trigger a lightbox when a link is clicked, then you need to change the link to do that.
I have tried the following code:
<iframe controls="0" autoplay="0" class="embed-responsive-item" src="videos/first_video.mp4"></iframe>
I have tried many things but not getting any solution. I want to disable the autoplay on the video and don't want to use <video> tag so its possible without <video> tag?
I think this is what you want.
function a() {
var iframe = document.getElementById("iframe");
iframe.src = "video.mp4"
}
<iframe src="imagename" height="200" width="300" id="iframe"></iframe>
<button onclick="a()">Play</button>
iframe does not support this by default. Why do you not want to use video tag? The only thing I can think of to make it look like an iframe without autoplay is with help of javascript.
First set the iframe src to empty or leave the src out.
Set a picture as iframe background to make it look like the video.
<iframe style="background-image:url(picture.png)" id="frame" controls="0" class="embed-responsive-item" src=""></iframe>
Then create an onclick event for that iframe and change the iframe src
function loadVideo() {
var frame = document.getElementById("frame");
frame.src = "video.mp4";
}
I would consider using video tag or a plugin that works on every browser.
According to this article the syntax should go like this:
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen"></iframe>
<iframe src="https://cross-origin.com/myvideo.html" allow="fullscreen"></iframe>
<iframe src="https://cross-origin.com/myvideo.html" allow=""></iframe>
This is fairly new (at least to me) and I don't see explicit directions as to how autoplay is shut off. Try either the second or third example. This is part of the new feature policy called iframe delegation which will go into full effect on april 2018. I will add onto this answer if I find more concrete info.
Google Chrome is now shipping with a download button for videos that are just embedded videos (i.e. not MSE):
I'm having a hard time find any documentation for Chrome's implementation of the <video> tag. Does anyone know if there is a way - short of disabling "controls" and creating your own video player controls - of disabling this feature?
I realize that if this is showing, it's already easy to download the video, I just want to disable that functionality from appearing as part of the controls.
Thank you!
or you can simply add nodownload in controlsList
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
You can inspect the controls of the native Chrome Video Player by activating the shadow DOM in Settings|Preferences -> Elements -> Show user agent shadow DOM
After that you can inspect the players buttons.
Now the problem is that the download button cannot be accessed via CSS for some reason.
video::-internal-media-controls-download-button {
display:none;
}
won't work.
Even selecting the preceding button and targeting its neighbor using + or ~ won't work.
The only way we found yet was nudging the button out of the viewable area by giving the control panel a greater width and making the enclosure overflow: hidden
video::-webkit-media-controls {
overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
width: calc(100% + 32px);
margin-left: auto;
}
I hope google will fix this issue soon because most content providers won't be happy with this...
Demmongonis solution does work but be aware it can lead to unwanted results.
Android/Chrome sometimes, depends in the video I guess and other factors, adds buttons at the right of the download-button. i.e. the casting-button (there is no way to select it). It will make the download-button to remain visible and the last button to get hidden (casting-button)
Update
It is posible now to hide the download button using the controlsList attribute:
<video controlsList="nodownload" ... />
Yes, this is possible now, at least at the time of writing, you can use the controlsList attribute:
<video controls controlsList="nodownload">
<source data-src="movie.mp4">
</video>
It seems this was introduced in Chrome 58, and the documentation for it is found here: https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist
Developers can now customize media controls such as the download, fullscreen and remoteplayback buttons.
Usage in HTML:
<video controls controlsList="nofullscreen nodownload noremote foobar"></video>
There is even an official sample page: https://googlechrome.github.io/samples/media/controlslist.html
One more control item I was trying to disable, additionally to 'download' - is 'picture-in-picture'.
Sadly there`s no property, for that purpose to be added in the controlsList. But there is an attribute - disablePictureInPicture you can add to the Element to disable pip.
Example disabling both download and picture-in-picture:
<video disablepictureinpicture controlslist="nodownload">...</video>
Details: https://wicg.github.io/picture-in-picture/#disable-pip
Hey I found a permanent solution that should work in every case!
For normal webdevelopment
<script type="text/javascript">
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 videos that has preload on false
$( document ).ready(function() {
$("video").each(function(){
$(this).attr('controlsList','nodownload');
$(this).load();
});
});
$ undevinded? --> Debug modus!
<script type="text/javascript">
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 videos that has preload on false
jQuery( document ).ready(function() {
jQuery("video").each(function(){
jQuery(this).attr('controlsList','nodownload');
jQuery(this).load();
});
});
Let me know if it helped you out!
To keep it simple.. You need to add an attribute called controlslist (LOWERCASE, directly after controls) and you need to set its value to ="nodownload". Also, make sure your src file(type) and your attribute type's value match, unlike some of the above examples; my link is to a file named 'sunrise over water.mp4' on my Google Drive. How I do it looks like this:
<video src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" title="sunrise over water" width="420" height="300" controls controlslist="nodownload" type="video/mp4">
Video Not Supported By Your Browser...
</video>
OR
<video width="440" height="320" title="sunrise over water" controls controlslist="nodownload">
<source src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" type="video/mp4">
Video Could Not Be Played In Your Browser... Sorry.
</video>
In addition to above answers you have to add following code to disable context menu:
index.html: (globally)
<body oncontextmenu="return false;">
OR you can disable context menu for some element:
element.oncontextmenu = function (e) {
e.preventDefault();
};
Plain javascript to disable the "download" Button from a video in your page:
<script>
window.onload = function() {
video = document.querySelector('video');
if (video) {
video.setAttribute("controlsList", "nodownload");
}
};
</script>
If you want to, you can also is querySelectorAll and remove each video. In my example I just have only one video per page.
The above answer offers a good solution. However, when I was working on this in my project, there were two problems with it.
Download occurs (as if the download button had been pressed) when right margin area of the fullscreen button is touched on Android (mobile or tablet). Applying z-index didn't fix it.
Because of overflow:hidden, the download button is invisible but still exists to the right of the fullscreen button. That means when you press "tab" several times after clicking any control button or bar on PC, you can still reach the download button.
Additionally, be careful -- some small-width devices (e.g. mobile phones) are small enough to hide the seek bar. It would need many more pixels to hide the download button.
I hope Google provides the option to adjust this ASAP.
I using following JavaScript snippet which is working very well:
document.querySelectorAll("video[id^=media-player]").forEach((elem) => elem.controlsList.add("nodownload"));
Example: www.ring-cafe-finsterwalde.de/archiv/archiv.html#archiv4
I will try and be as thorough with my question as possible the first go round. My question is this:
I am trying to embed a Vimeo video on to Blogger that plays at a specific timestamp, i.e. 4mins 32secs, instead of the beginning of the video without it autoplaying. The video will embed fine at the timestamp but it will autoplay and I cannot figure out how to turn that feature off. The code for the video is below:
<div style="text-align: center;">
<br />
<iframe allowfullscreen="" frameborder="0" height="375" mozallowfullscreen=""src="https://player.vimeo.com/video/125840111#t=3665s" webkitallowfullscreen=""width="500"></iframe>
I have tried various methods "?autoplay=0" etc. but I guess I am not getting the code right.
Any help would be greatly appreciated
have you tried like this ?
<iframe allowfullscreen="" frameborder="0" height="375" mozallowfullscreen=""src="https://player.vimeo.com/video/125840111#t=3665s?autoplay=0" webkitallowfullscreen=""width="500"></iframe>
if it didn't work then try to find it by inspect element, it may be changed to ?autopplay=1 after page load,
so try this method it worked for me
first your html, paste a screenshot of your vimeo video in an image tag and define an onclick function for that and bind iframe on click function,it should work
here is the code
<div id="parent-div" >
<img id="vimeo-video" src="images/homeVideo.png" onclick="return imgClick();" />
</div>
and your javascript function
function imgClick() {
jQuery('#image-for-video').hide(); //hide the image to display your video
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "https://player.vimeo.com/video/1992892829?autoplay=0");
ifrm.style.width = "496px";
ifrm.style.height = "277px";
// add rest of your values
ifrm.frameborder = 0;
document.getElementById("parent-div").appendChild(ifrm);
return false;
}
Does anybody know of a non Javascript youtube video pop up. I have a button on my homepage which I want to open a pop up with a youtube video inside.
Thanks guys
this is my link
<span class="cta floatL">through the eyes of a bigsmile advert</span><span class="playIco floatL"></span>
this is my iframe
<iframe width="420" height="345" src="<iframe width="420" height="345" src="http://www.youtube.com/embed/krlR2-YGk4sI?autoplay=1" frameborder="0" allowfullscreen></iframe>" frameborder="0" allowfullscreen></iframe>'
I just need to find a way to make it pop up in the center of the screen like a fancybox, without javascript. Thanks guys
no i dont think there is a method without using JS but it is very simple with JS for a piece like this. you should just be able to place the popup in a div and then use CSS to make it hidden then on the button click a JS function that will bring it to the top.
Hope this helps :)
<div id='PopUp' style='display:none;'>
<iframe></iframe>
</div>
<button onclick='showPopUp()'>click Me</button>
<script>
function showPopUp()
{
document.getElementById('PopUp').style.display = 'block';
}
</script>