Detecting DOM changes made in browser web console - javascript

A video website that I use has started to overlay an image on top of their content for users using an adblocker. For instance:
The image is overlaid using the following:
<div class="vid_lhs" id="website-name-message-users">
<img name="Map" usemap="#Map" style="max-width:100%" src="http://drop.website-name.com/website-name/images/website-name-abp-message.jpg">
</div>
And the video is hidden by setting display=none like so:
<div class="vid_lhs" id="ins_videodetail" style="display: none;">
....
<video class="videobase vsc-initialized" id="contentElement" width="100%" height="100%" preload="auto|metadata|none" playsinline="" webkit-playsinline="" src="http://website-nameod.bc.cdn.bitgravity.com/blah-blah.mp4" data-vscid="blah-blah" autoplay="" style="display: inline; object-fit: fill;"> </video>
....
</div>
This is easily bypassed using a simple script on the browser's web console:
$('#website-name-message-users').remove();
$('#ins_videodetail').show();
My question is: What are the different ways by which the website can identify that the DOM is being tampered, so that they can better protect their content? I ask because they seem to change the way this adblock-block is implemented every 2-3 days, which leads me to believe that they may be playing a (pointless?) cat-and-mouse-game with users like me...

Related

some part of the image becoming invisible while using it on html page

I am talking about the image in the second section of link on this HTML page.
and here is the link of the original image.
when you inspect the HTML page you can see, I am using the same image as the link given, and still, the hand in the image is not showing, I tried to do resizing and everything on inspect so that the hand in the image become visible but not working. I thought it is an issue of z-index but I checked everything z-index is fine, the border part of the hand is visible.
I just saw with different Mac and safari browser the image is showing up with hand but in my system, Linux, and chrome browser the image is showing up without the hand.
<div class="col-lg-4 is-animated">
<img src="assets/images/2sec.svg" class="img-fluid" alt="">
</div>
Have a try using <object> tag:
<object type="image/svg+xml" data="https://www.thealphateam.digital/demos/pando/assets/images/2sec.svg">
#Progu, Thanks for your answer, your answer was working but I started facing another problem with my javascript code, scrolling stopped working when I used an object tag to display image...
so I searched for more alternatives to display images apart from an image tag, and I found the Iframe method, it worked awesomely. but still, if someone knows why this was happening and can display it with the image tag can answer.
<iframe frameborder="0" scrolling="no" width="100%" height="100%"
src="assets/images/2sec.svg" name="imgbox" id="imgbox">
<p>iframes are not supported by your browser.</p>
</iframe><br />
Change the inline style style margin-left value.
<iframe frameborder="0" scrolling="no" width="100%" height="100%" src="assets/images/2sec.svg" name="imgbox" id="imgbox" style="margin-left: 256px;">
And also the svg width="100%" and height="auto"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="auto" viewBox="0 0 540 471" fill="none">

How to prevent a slideshow's figcaption from jumping up and down as each image loads?

I've spent a horrendous amount of time on this.
I'm using
<!-- phased loading of images -->
<script src="lazysizes.min.js" async=""></script>
At Google's optimising suggestion, so images only load as the user can actually see them. However this means the browser is unable to layout the page in advance and therefore moves page elements around as images load. I've solved some of this by specifying a height on my image box so the whole page doesn't leap up and down.
Sadly though the figcaption at the bottom of each slide continues to leap up and down, whilst the browser fetches the next image. I've tried various ways of specifying a height on each slideshow image, using my mySlidesV class, but google seemingly just ignores that till it's loaded.
Because I'm loading images of different dimensions based on media queries my css is getting ever more complicated, what's the most robust and clean way of fixing this?
This is a sample of the slideshow:
<div class="slideshow-container">
<picture class="mySlidesV">
<source media="(max-width: 374px)" data-srcset="imagesIndex/slideshow-vertical/victoria-street-cropped-540.webp" type="image/webp">
<source data-srcset="imagesIndex/slideshow-vertical/victoria-street-wide-540.webp" type="image/webp">
<source media="(max-width: 374px)" data-srcset="imagesIndex/slideshow-vertical/victoria-street-cropped-540_guetzli.jpg">
<img data-src="imagesIndex/slideshow-vertical/victoria-street-wide-540_guetzli.jpg" alt="A Harry Potter tour dressed in cosplay poses on Victoria Street" class="lazyload"/>
<figcaption class="slides-vertical">Victoria Street, reputed to be the inspiration for Diagon Alley. Over summer we stop here for Scottish ice-cream; this class just had a standard Cheering charm, I love a fizzy brain</figcaption>
</picture>
<picture class="mySlidesV">
<source data-srcset="imagesIndex/slideshow-vertical/floating-witch-540.webp" type="image/webp">
<img data-src="imagesIndex/slideshow-vertical/floating-witch-540_guetzli.jpg" alt="Young Witch in a Sorting Hat floats in mid air above Princes Street Edinburgh, the Castle in the background" class="lazyload">
<figcaption class="slides-vertical">Had a young witch on the tour today, she doesn't even need a broom</figcaption>
</picture>
<button class="w3-button w3-display-left" onclick="plusDivsV(-1)"><span style="color: white;">❮</span></button>
<button class="w3-button w3-display-right" onclick="plusDivsV(1)"><span style="color: white;">❯</span></button>
</div>
I'm using W3c's slideshow here: https://www.w3schools.com/howto/howto_js_slideshow.asp
You can always HIDE figcaption on page load, using the lazyload class and the next selector for figcaption. Once lazysizes loads the image, it removes the lazyload class from the image, which will ignore the below CSS and allow the figcaption to be displayed AFTER the image has been displayed.
.lazyload + figcaption{
display:none;
}

disable video autoplay in twitter bootrap and stop video when modal is closed

I'm embedding a local video to my page using Bootstrap 3
I use this code inside the modal
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" height="300" width="480"
src="hunnybunny.mp4"></iframe></div>
How can I prevent this video from autoplay? I also want the video to stop when the modal window is closed.
I was having issues with this and found a workaround. Drop the iframe in the html, for example:
(Note: I wanted video on the left so i put it in a row in the first 7 columns, also the "class = left_vid" is defined in my "override" custom linked style sheet)
<div class="row">
<div class="col-md-7">
<video controls class= left_vid> <source src="vid.mp4" type="video/mp4">
This browser does not display this video type </video>
</div>
<div class="col-md-5">
<p> Text stuff </p>
</div>
</div>
In the style.css
.left_vid {
display:block;
margin-left:auto;
margin-right:auto;
width: 80%;
height:auto;
}
Is it necessary to use an iframe for this? If not have look at the HTML5 video-tag:
http://www.w3schools.com/html/html5_video.asp
You are using iframe, you can not stop playing, you can only remove element like this
$('#myModal').on('hidden.bs.modal', function () {
$( ".embed-responsive-16" ).remove();
})
This is just example, we dont have all you code :(

Youtube video shows on click of image

I've looked at a few implementations of this and so far none have worked so I'm resorting to posting. The concept is: a placeholder image which once clicked changes into the video and autoplays.
Current HTML:
<div id="ytvideo" style="display:none;">
<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="/wp-content/uploads/2013/10/placeholder.jpg" width="940" height="548" />
Current JS:
jQuery(document).on('click','#homevideo',function(e){
jQuery('#ytvideo').show();
jQuery('#homevideo').hide();
jQuery('#ytvideo').attr("src","www.youtube.com/embed/[myvidid]?autoplay=1");
jQuery("#ytvideo").attr('src', jQuery("#ytvideo", parent).attr('src') + '?autoplay=1');
});
I've looked at trying to reload the iframe but that doesn't seem to work.
Any ideas?
MARKED: FIXED
You forgot the protocol - www.youtube.com/… would link to folder on the server.
With protocol it works fine – I’d suggest creating the whole iframe dynamically though, because with an empty src attribute at the beginning it would load the same page it is embedded in.
<div id="ytvideo" style="display:none;"></div>
<!-- replaced your image with a span here for fiddle -->
<span id="homevideo" data-vidid="mbOEknbi4gQ">click me</span>
$(document).on('click','#homevideo',function(e){
$('#homevideo').hide();
$('#ytvideo').html('<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/'+$(this).attr("data-vidid")+'?autoplay=1"></iframe>').show();
});
http://jsfiddle.net/HuVqm/
As discussed in one of the comments, you can get both the img and the video from the api.
This would be good if you didn't want to maintain the image, just wanted it to pull through from YouTube. (However I am not sure that YT provide an image as large as 939 so in your case you might still want to use your own image). I have put in a random channel name 'RIDEChannel' feel free to change that with your channel name.
<div id="vid"></div>
$.getJSON("http://gdata.youtube.com/feeds/api/users/RIDEChannel/uploads?max-results=1&v=2.1&alt=jsonc&callback=?", function (myvid) {
var vid = $("#vid");
$.each(myvid.data.items, function (i, item) {
vid.append("<img width='300' height='250' src='" + item.thumbnail.hqDefault + "'>");
$(document).on("click", "#vid img", function (event) {
vid.append("<iframe width='300' height='250' src='http://www.youtube.com/embed/" + item.id + "?autoplay=1' frameborder='0'></iframe>");
$(this).hide();
});
});
});
So the problem laid with the youtube url missing the http:// prefix and also for the fact that the iframe name was the same as the div it was enclosed in. (How silly of me) Thus it was attaching the SRC to the div, not the iframe.
Working DEMO
Try this,
First you cannot have same id for more than one elements <div id="ytvideo" and <iframe id="ytvideo"
[myvidid] in http://www.youtube.com/embed/[myvidid]?autoplay=1 should be replaced with the id of the video
html
<div id="ytvideo1" style="display:none;">
<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="http://thefabweb.com/wp-content/uploads/2012/12/6191814472_fa47c79b67_b-900x600.jpg" width="940" height="548" data-vid='DBNYwxDZ_pA'/>
code
jQuery(document).on('click','#homevideo',function(e){
jQuery('#ytvideo1').show();
jQuery('#homevideo').hide();
jQuery('#ytvideo').attr("src","http://www.youtube.com/embed/"+$(this).data('vid')+"?autoplay=1");
});
If you have more than 1 video, it could be useful to store the url to the video in the html and use a class instead of an id.
Also, if you put the preview image into the background, behind the video, it will stay there until the iframe has loaded, reducing that "flickering" effect when clicked.
I also restructured the markup a bit to reduce redundancy, here I specify the size of the video and the video id only once.
Also, you should use jQuery's .one('click') instead of .click(), since you want that event listener removed after it has fired the first time.
html:
<div class="ytvideo"
data-video="73sgatbknvo"
style="width:939px; height:528px; background-image:url(http://lorempixel.com/939/528/)">
<div class="seo">
Have a meaningful description of the video here
</div>
</div>
CSS:
.ytvideo {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
}
.ytvideo iframe {
border-style: none;
height: 100%;
width: 100%;
}
.ytvideo .seo {
display: none;
}
jQuery:
$('.ytvideo[data-video]').one('click', function() {
$(this).html('<iframe allowfullscreen src="//www.youtube.com/embed/'+$(this).data("video")+'?autoplay=1"></iframe>');
});
If you want to support browsers with no script support, you'd have to add a "noscript" element in the .ytvideo div that already contains the iframe.
fiddle:
http://jsfiddle.net/6ARc7/

Triggering a Flash button with an image overlay

I am using Google's Audio player to play an MP3 on a webpage. My issue is that I am overlaying an image on top of the the play/pause button. Yet when the image is clicked nothing happens. What am I doing wrong? Here is the code:
<div class="center" style="width: 400px; z-index:1; visibility:hidden;">
<embed wmode="transparent" width="400" height="27"
type="application/x-shockwave-flash" flashvars="audioUrl=/sourcefile.mp3"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf" quality="best"
></embed>
</div>
<img style="position:absolute; left:323px; top:630px; z-index:10000;"
src="/messages4u/2011/images/december/star-button.jpg" width="60" height="60"
alt="Play/Pause" />
I need to know how to trigger the flash button. I know it is possible with Javascript but I do not know how. Please provide examples.
UPDATE: Here is what I have tried at this point. Per Matt H recommendation I tried this code:
<input type="image" disabled style="position:absolute; left:323px; top:630px;
z-index:10000;" src="/messages4u/2011/images/december/star-button.jpg"
width="60" height="60" alt="Play/Pause" />
That did not work. One thing I noticed is if I have visibility:hidden; the flash player will not respoind to any clicks regardless of what is over it. With that said I attempted to overlay the image using <input> without the visibility:hidden; and it still did not work.
I need to get this fixed if at all possible. I am willing to use another flash player that is similar as long as it works correctly and will use an mp3 like above.
Looks like your image is catching the click that is supposed to go to the play button. You should add a handler for your image which returns true OR calls the player's play function.
Try this:
<input type="image" disabled style="position:absolute; left:323px; top:630px; z-index:10000;"
src="/messages4u/2011/images/december/star-button.jpg"
width="60" height="60" alt="Play/Pause" />

Categories

Resources