I have the following code working for desktop but not mobile. The code displays an image and if that image is clicked it will then replace it with an iframe holding the youtube video assigned to it..
<img src="/image/background/ph_shop.jpg" alt="Shop Directions" class="video-placeholder img-force shadow-box pointer" data-video="https://www.youtube.com/v/m8qcEilvdMQ&rel=0&autoplay=1" />
<script>
$(".video-placeholder").click(function(){
var video = \'<iframe frameborder="0" class="width-100 shadow-box" height="400" src="\'+ $(this).attr(\'data-video\') +\'" allowfullscreen></iframe>\';
$(this).replaceWith(video);
});
</script>
When I try to click the image in mobile it removes the image but doesn't load anything in it's place and then it tries to download a file that cannot be opened called "m8qcEilvdMQ&rel=0&autoplay=1"
I had the same problem and solved it!
The solution is to change your YouTube Video URL.
Replace the /v/ in your url with /embed/.
For example, replace your URL https://www.youtube.com/v/m8qcEilvdMQ&rel=0&autoplay=1 with https://www.youtube.com/embed/m8qcEilvdMQ&rel=0&autoplay=1
I don't know why the "v" URL starts a download, I think it is because it returns the header with content-type application/x-shockwave-flash, and the embed URL returns a content-type text/html.
Related
I'm using iframe to view PDF file from base64 string. When it is rendered successfully, the browser automatically set a title for it. I've tried to remove it by CSS but it's not working.
Is there anyway to hide or remove it? Thank you guys!
Here is my sample code:
app.component.html
<iframe #ManualFrame [src]=" url | safe: 'resourceUrl'" width="100%" height="100%"></iframe>
app.component.ts
let base64String = 'JVBERi0xLjUNCjQgMCBvYmoNCjw8L...'
this.url = 'data:application/pdf;base64,' + base64String;
I am running a flask app, and using a plugin named "Autoindex" for listing all the files in a directory,
like this
Now, when i click on an image name, it opens the image. But I want to downlaod the image without leaving the page on button click.
I cannot modify the HTML code of this. So I was thinking, can i use Javascript to perform this task?
EDIT
This is the HTML CODE:
<td class="name">
2.jpg</td>
<td class="modified">
<time datetime="2019-07-15 15:42:20.989829">2019-07-15 15:42:20.989829</time>
</td>
<td class="size">
Now, I cannot modify the HTML Code directly. The link has no class, how can I change this
2.jpg
to this, for all image links in the page.
2.jpg
You can use JS to add download attribute to a HTML element:
element.setAttribute('download','')
Or even simpler:
element.download=''
So, you can easily add this for each link with a href ending .jpg:
const links=document.querySelectorAll('a[href$=".jpg"]')
links.forEach(link=>link.download='')
It is so easy!
Put the image inside an tag or withing an tag then add the attribute download and the images' URL withing that tag.
here is an example:
<a href="https://www.publicdomainpictures.net/pictures/320000/nahled/background-image.png" download>
<img src="https://www.publicdomainpictures.net/pictures/320000/nahled/background-image.png" alt="W3Schools" width="104" height="142">
</a>
image
Note: The download attribute is not supported in IE or Edge (prior version 18), or in Safari (prior version 10.1).
I have a YouTube video playing in the background AFTER the close button is clicked...Here's the jQuery I can't get to work:
$('#close1').on('click', function() {
// $('#video1').stopVideo();
$('#video1')[0]
.contentWindow
.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
Here's a the example: http://georgehowell.biz/unsw1/index.html
i found this interesting thread related this issue and it has many suggestions of solution, maybe any of them will work for you:
Stop embedded youtube iframe?
Without using YouTube's iframe_API; you can simply use:
iframe.contentWindow.postMessage(message, origin);
to send message to iframeWindow (from parentWindow). Those messages can include "playVideo", "pauseVideo", "stopVideo", "muteVideo" etc.. (whatever video service, in this case youtube, supports)
Check out the link below for the live demo:
https://codepen.io/mcakir/pen/JpQpwm
change 1 - the iframe src url should be blank here
<div id="openModal1" class="modalDialog">
<div>
X
<iframe width="600" height="338" src="" class="homeVideo" id="video1" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div> <!----END modal-body ---->
</div> <!----END modal ---->
change 2: how to play the videos just set the src URL with autoplay=yup on the query string - we do not need to enable the JS api:
$('#thumb1').on('click', function(ev) {
$("iframe#video1")[0].src = "https://www.youtube.com/embed/Lop0VCYdpGQ?rel=0&wmode=transparent&autoplay=1";
});
change 3 - how to pause - just set the iframe src to an empty string:
$('#close1').click(function(){
$("iframe#video1")[0].src = "";
});
I have a requirement where I need to embed the video code directly in a blog.
I was able to figure out the code where the video is there, I stored it in a html file,named it as video.html
This is the link from where I have to extract the video, Watch Video link:
http://www.moneycontrol.com/news/stocks-views/hdil-tata-global-ifci-top-picks-manoj-vayalar_925072.html
The problem is that when I upload video.html file, only the static image gets loaded. I need the video to be playable when I click the button, so that I can directly insert this video.html in the blog.
Here is the code:
<div class="CL"></div>
<div class="vidnewsin">
<div class="vidmd">
<div class="vidplayin">
<div class="gD_18"></span><strong>Watch Video</strong></div><div class="MT10"></div>
<div id="load_player">
<div class="PRVEDO"><a class="playBtnSn" href="javascript:void(0);" onclick="javascript:load_vplayer('925072');"></a><img src="http://img.moneycontrol.co.in/news_image_files/vid_img/2013/07/925072.jpg" width="441" height="361" alt="" /></div>
<div><img src="http://img.moneycontrol.co.in/images/news/vplrBar.gif" alt="" /></div>
<div class="PT10">
I know that I am loading only the image source, hence the video is getting loaded as an image.
Also, how to directly insert the video.html in the blog.
Kindly help me on this.
Thanks.
Updated:
Is it possible to load video through the html file which I am creating? I mean, if I can extract the content server of the video, then, will the video be playable through an html file? Thanks.
Updated:
I have modified the code a bit, and directly added the video url:
<div class="CL"></div>
<div class="vidnewsin">
<div class="vidmd">
<div class="vidplayin">
<div class="gD_18"></span><strong>Watch Video</strong></div><div class="MT10"></div>
<div id="load_player">
<div class="PRVEDO"><a class="playBtnSn" href="javascript:void(0);" onclick="javascript:load_vplayer('http://videos.moneycontrol.com/web18/mc-vods/2013Jul/manoj_variuousstocks_25jul.mp4');"></a><img src="http://img.moneycontrol.co.in/news_image_files/vid_img/2013/07/925072.jpg" width="441" height="361" alt="" /></div>
<div><img src="http://img.moneycontrol.co.in/images/news/vplrBar.gif" alt="" /></div>
<div class="PT10">
I thought that by doing this, the video will be playable, directly with an HTML file, which late, I will use in the blog.
But still, the issue is not resolved.
Kindly let me know where am I wrong, even if this means, refactoring the ajax request from the moneycontrol page, though I have no idea on Ajax scripting.
Thanks.
After reviewing the source HTML of the page, I found that when the play button clicked, there will be a ajax request to get the real video embed code. In your case, this code is
<div style="z-index:0;" id="player">
<embed width="468" height="351" flashvars="servicetype=chunk&streamurl=2013Jul/manoj_variuousstocks_25jul.mp4&totalchunk=4&videopart=&server=http://videos.moneycontrol.com/web18/mc-vods/&controllerpath=http://img.moneycontrol.co.in/tv/flash/control_moneycontrol_chunk_24July.swf&autoplay=1&showrelatedbutton=0&relatedPath=http://api.moneycontrol.com/solr/solr_related_videos_multiple_test.php?id=925072%26format=player&site=www.moneycontrol.com&trackingurl=http://vtracking.in.com/TackImg_CHK_VOD.PNG&googlepreroll=0&googlepostroll=0&googleoverlay=0&channelindex=3&vastpreurl=http%3A%2F%2Fc7.zedo.com%2Fjsc%2Fc1%2Ffns.vast%3Fn%3D1656%26c%3D1211%26d%3D18%26s%3D11%26v%3Dvast2%26z%3D&vastposturl=http%3A%2F%2Fc7.zedo.com%2Fjsc%2Fc1%2Ffns.vast%3Fn%3D1656%26c%3D1214%26d%3D18%26s%3D11%26v%3Dvast2%26z%3D&vastoverlayurl=http%3A%2F%2Fc7.zedo.com%2Fjsc%2Fc1%2Ffns.vast%3Fn%3D1656%26c%3D1213%26d%3D83%26s%3D11%26v%3Dvast2%26z%3D" allowscriptaccess="always" wmode="transparent" allowfullscreen="true" quality="high" bgcolor="#ffffff" name="videoPlayer" id="videoPlayer" style="undefined" src="http://img.moneycontrol.co.in/tv/flash/Main_chunk_24July.swf" type="application/x-shockwave-flash">
</div>
For more details ,the ajax request handler is located at http://www.moneycontrol.com/mccode/news/article/load_video_ajax.php`. You can see it in the javascript
function load_vplayer(auto_num)
{
if(navigator.userAgent.match(/iPad/i) != null)
{
window.location="http://www.moneycontrol.com/tablet/index.php?v_autono="+auto_num;
}
else
{
$.ajax({
type: "POST",
url: "/mccode/news/article/load_video_ajax.php",
data: {auto_num:auto_num},
timeout:5000,
error: function(jqXHR, exception) {},
success: function(data){
if(data!='')
{
$("#load_player").html("");
$("#load_player").html(data);
}
}
});
}
}
Another problem is the flashvar property which locating the video location. As you can see in the embed code, the flash player use relative url as input. Therefore, I afraid that you can not embed video from this site just by using its own HTML.
Updated
In the ajax respond, the video uri is located in two segment:
The server server=http://videos.moneycontrol.com/web18/mc-vods/
The video relative url streamurl=2013Jul/manoj_variuousstocks_25jul.mp4
With the above data, the full url of the video is http://videos.moneycontrol.com/web18/mc-vods/2013Jul/manoj_variuousstocks_25jul.mp4. You can use it with another player as in my demo to load the video.
I had tried the iframe for embedding youtube video in sencha inside the html tag.
....
html:'<iframe>Youtube URL</iframe>'
....
I added the above code inside the second icon of the tab bar. The second icon is a scroll view.i.e i set it to scroll:'vertical'
My Problem is when i add youtube video.It comes like this...
Look.Only Part of the video is shown.
when i switch to other tab panel,the video appears as below.
Any Help!!!
I've done this using HTML inside a panel. of course it doesn't play embedded in the sencha app. It jumps to the youTube player.
html: '<div style="margin-left:12px; margin-top:20px"><h1>Syndicate Trailer</h1><p><iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/ewwtznVkSxA" frameborder="0"></iframe></p><h1>Prometheus Trailer</h1><p><iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/sftuxbvGwiU" frameborder="0"></iframe></p></div>'
This leaves the links in the video frame which didn't suit my app so I modified to use this instead:
html: '<div style="margin-left:12px; margin-top:20px"><h1>Eddies Cinema Slot </h1><p><embed id=\"yt\" src=\"http://www.youtube.com/watch?v=5a9-ORWn0fY\" type=\"application/x-shockwave-flash\" width=\"290\" height=\"260\"></embed></p></div>'