zigotica

.video { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; }
.video img { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; cursor: pointer; }
.video:after { content: ""; position: absolute; display: block; 
    background: url(play-button.png) no-repeat 0 0; 
    top: 45%; left: 45%; width: 46px; height: 36px; z-index: 30; cursor: pointer; } 
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* image poster clicked, player class added using js */
.video.player img { display: none; }
.video.player:after { display: none; }

neilgee

<?php

//wp_localize_script  by default passes everything in as strings so for booleans and integers when being referenced in your javascript you need to do some trickery 

//Example 1 - passing in booleans as strings
$options = get_option('ng_slicknavmenu');
  // Add PHP plugin variables to the $params[] array to pass to jQuery
  $data = array (
    'ng_slicknav_menu'         => $options['ng_slicknav_menu'],
    'ng_slicknav_position'     => $options['ng_slicknav_position'],

badvision

// This must be in a client library with the category cq.authoring.editor.hook
/* global Granite, jQuery, document */
(function ($, channel) {
    'use strict';
    $(function () {
        var loadedTime = new Date();
        channel.on('cq-layer-activated', function (event) {
            if (event.prevLayer && event.layer !== event.prevLayer) {
                var eventTime = new Date();
                if (event.prevLayer !== 'Annotate' && event.layer !== 'Annotate' && (eventTime - loadedTime) > 1500) {

nateyolles

<!-- Checked checkbox will result in a String property of "true" -->
<myCheckbox
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/checkbox"
    text="My Checkbox"
    name="./myCheckbox"
    value="true"/>

<!-- Checked checkbox will result in a Boolean property of true-->
<myBooleanCheckbox

astyfx

export function withProps<U>() {
  return <P, T, O>(
    fn: ThemedStyledFunction<P, T, O>,
  ): ThemedStyledFunction<P & U, T, O & U> =>
    fn as ThemedStyledFunction<P & U, T, O & U>;
}

interface StyledAlertProps {
  isAttachable?: boolean;
  status?: string;