This should be a standard YouTube video:

This should only be audio of the same video:

Decided to try out this geolocation code from W3 Collective. It uses Leaflet instead of Google Maps so I don’t need a Google API code. Note that if you are using a VPN, it may not accurately show your location.

Since this can compromise privacy, the position is not available unless the user approves it.

Try It

This is an exercise to see if a DIV could be removed from a page using jQuery by selecting based on a CSS value. It is based on this WordPress support question. What’s happening to the author’s site is that there are a number of rogue DIVs which have a CSS left property set to -9999px, which is creating a huge blank left margin. Was able to hide the DIVs using CSS on desktop, but still showing up on mobile.

There is a “rogue” DIV after this paragraph with the left CSS value set to -99. The jQuery should remove it.

The rogue DIV is before this paragraph.

This is an example page that shows how to include multiple Google Adsense ads.

There should be an ad after this block.

From this support question, trying to see if defining a list in uppercase is different than one in lowercase, i.e., <UL> versus <ul>.

lowercase HTML list:

• 1
• 2
• 3
• 4

Uppercase HTML list:

• 1
• 2
• 3
• 4

Does this make the block zoom?

Hello, world!

This is a basic viewer using the Cesium javascript library. The example code can be found here.

This demo shows how to construct a row of four images that break into two rows of two images each at a certain screen width. Note in the example below, a CSS rule is used to set the width of each of the four images to 25% of the parent element so they all fit on one row, and then a media query is defined that sets the widths of each image to 50% when the screen width is 720px or less, which causes them to wrap into two rows.

<!-- HTML -->
<div class="collage">
<div class="col-4-2"><img src="http://embracebirth.ca/wp-content/uploads/2018/04/38w1c.jpg"></div>
<div class="col-4-2"><img src="http://embracebirth.ca/wp-content/uploads/2018/04/McColl47.jpg"></div>
<div class="col-4-2"><img src="http://embracebirth.ca/wp-content/uploads/2018/02/McColl124-2.jpg"></div>
<div class="col-4-2"><img src="http://embracebirth.ca/wp-content/uploads/2015/11/Helena18.jpg"></div>
</div>

/* CSS */
.collage {
   display: flex;
   flex-wrap: wrap;
   font-size: 0;
}
.col-4-2 {
   display: inline-block;
   width: 25%;
}
@media all and (max-width:720px) {
   .col-4-2 {
      width: 50%;
   }
}

Try adjusting your browser width and see when the row converts from one row of four images to two rows of two images.