Handle HTML5 video autoplay with Javascript

Sometimes we need to autoplay a video using the tag <video> when a user click a button or when a page is loaded.

In this post I will share a simple example how we can achieve that.

// Get the video element
const video = document.getElementById('videoElement');

if (video) {
    // get the tags sources inside the video tag
    const sources = video.getElementsByTagName('source');

    // Add a listener to the tag video when is loaded and play the video
    video.addEventListener('loadeddata', () => video.play(), false)

    /**
     * isMobile is a function to detect if the device is a mobible device or not
     * If is true load the mobile version of teh video via data attribute
     * Else load the Desktop version
     */ 
    isMobile.any()
        ? (sources[0].src = video.getAttribute('data-mobile'))
        : (sources[0].src = video.getAttribute('data-desktop'))

    // load the video added to the source value
    video.load()
}
...
<video class="" id="videoElement" 
    autoplay="autoplay" loop="loop" 
    muted="muted" playsinline 
    data-desktop="video.mp4" 
    data-mobile="video-mobile.mp4">
        <source src="" type="video/mp4">
</video>
...

Is important to have the playsinline attribute in the video tag if not the video wont autoplay on mobile devices

Install pdo_mysql library using WordPress image in Docker

If you work with the image of Worpress for Docker and need to do something “out of the box” like connecting to the database that uses the WordPress image from a script that is not part of the WordPress theme it will not be possible because you need to install the MySQL pdo library in WordPress container.

To solve this we only need only two commands:

  • A command to install the pdo library that we need
  • A command to restart the WordPress container to load the new installed library

Install pdo library in WordPress container:

docker exec -it container_wordpress_1 docker-php-ext-install pdo_mysql

Restart Apache in WordPress container

docker exec -it container_wordpress_1 /etc/init.d/apache2 reload

Ready, your custom script can now connect to the same database used by the WordPress container.

Style WordPress galleries easily with CSS Grid

This is a simple example of how we can format galleries inserted into WordPress posts using CSS Grid in the style sheet.

The CSS class that represents the gallery within the post is .gallery and each gallery format ranges from the .gallery-columns-1 class that represents a column to the .gallery-columns-9 class that represents a nine-column gallery.

.gallery.gallery-columns-1 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-2 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-3 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-4 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-5 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-6 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-7 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-8 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-9 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}

Development Trello Board Template

Trying to improve my work methodology lately and I come using Trello to track my programming projects, the good thing about using these tools is that if you are in a place that lacks order or there is no one to organize the current projects is that it gives you a complete vision in the follow-up of all the projects, well, at least those that are at your position.

Trello has very good examples on his page to be inspired when creating Boards and taking some ideas from them I share a Board that I created for the follow-up of a programming project.

View: Development Template Board

WTF?!? Cookies are blocked due to unexpected output

One of the worst messages you can see in WordPress and especially in production as a developer is: Cookies are blocked due to unexpected output.

This error does not tell you anything, it can be a problem with a plugin (lucky you if you have few of them) or a file in the active theme that is saved in some type of encoding other than UTF-8.

When this error appeared to me recently, the solution in my case was to check the encoding of all the modified files since the date the message appeared in the WP Admin, in each file check the type of encoding and all those that were “UTF-8 BOM ” I saved them again in” UTF-8 “format.

There are many cases of why this error happens, in my case I knew that it was a problem was the current theme because at the time that I renamed the active theme name in the server the WP Admin was gone.

Recommendations:

  • Use an editor that allows you to see the type of encoding of a file
  • The php files save them in UTF-8 encoding
  • Never, but never trust Windows editors 🤦‍♂️