'How can I select (target) first iframe?

I am trying to auto recognize which post contains iframe (video) and stick video to top of the post, while rest of the post (text with the title and other stuff) would be bellow it, because it looks nicer that way.

So far I have

/* If div with specific class has an iframe add another class to the div */
jQuery(document).ready(function( $ ) {
    $('.single-post:has(iframe)').addClass('video-post');
});

CSS:

.video-post .site-main .video-wrapper {
    position: absolute;
    padding-bottom: 56.25%;
    top: 0;
    left: 0;
    width: 100%;
}

.video-post .site-main .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.video-post .site-main {
    position: relative;
    padding-top: 58.25% !important;
}

The problem is if the post has two videos, so how do I target only one (first) iframe with this modification while leaving other inside the post content?

jquerycss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions