Incorporating CSS3 can make this task a breeze. The key element that some of you might be overlooking is the use of z-index. It's like the enforcer in this styling situation.

Take a look at the following code snippet. I encapsulated the player within a div, defined its dimensions to my liking, specified overflow as hidden, and configured z-index accordingly. And oh, don't forget about the border radius - it adds a nice touch!

.player {
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  height: 320px;
  width: 480px;
}

<div class="player">
<iframe width="480" height="320" src="https://www.youtube.com/embed/aiegUzPX8Zc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>

To apply border styles, simply use the following code:

border:20px solid #000;

A cool trick to achieve rounded corners on YouTube videos or other elements like iframes and images.

<div style="
width: 560px;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); /*fix for iOS 7 border-radius bug*/
-webkit-transform: rotate(0.000001deg); /*fix for MacOS 10.6 Safari 5 border-radius bug*/
-webkit-border-radius: 10px; 
-moz-border-radius: 10px;
border-radius: 10px; 
overflow: hidden; 
">
<iframe width="560" height="315" src="http://www.youtube.com/embed/ZM0e1m9T9HQ" frameborder="0">
</iframe>
</div>

If you want to achieve the appearance of rounded corners, one technique is to utilize four overlay div elements resembling a curved corner and place them at each corner of the element. While not the most efficient method, this is currently the only way to attain that visual effect.

Initially, the browser handles it as a regular block element with the border radius applied. However, once the flash object is fully loaded, it simply overlaps the top, unable to be affected by border radius properties resulting in their disappearance.

For optimum embedding, consider using a direct embed/object method with swfobject or similar tools, and set wmode to transparent or opaque for better performance.

http://jsfiddle.net/AkPXj/19/

It can be quite difficult to round the corners of embedded Flash videos like those from YouTube and Vimeo due to compatibility issues with older browsers.

If all your users are using HTML5-supported browsers, simply adding player=html5 to the iframe link will ensure that the border-radius works smoothly:

http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&player=html5

However, if some users' browsers do not support HTML5, things get complicated. One workaround is customizing styles for each browser and using !important tags along with adding wmode=transparent to the iframe link:

http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent

For legacy browser support (such as Internet Explorer 6), the most reliable method involves creating an image resembling a curved corner and overlaying it on each corner of the video. Ensure to use the wmode=transparent trick to prevent display issues.

Check out this example applying the image overlay technique to an iframe-embedded YouTube video: http://jsfiddle.net/skywalkar/uyfR6/ (radius = 20px).

Keep in mind that larger corner overlays may cover player controls. To mitigate this, consider rotating the images by 45 degrees for a different set of overlays and adjusting margins accordingly. Here's an example with a radius of 30px: http://jsfiddle.net/skywalkar/BPnLh/.

To incorporate this design, you must insert the following code snippet into your CSS file:

<style>
.div-round {
    overflow: hidden;
    position: relative;
    z-index: 10;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

.div-round::before {
    display: block;
    content: "";
}

.iframe-round {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    border: 0;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}
</style>

Next, apply these classes to your div and iframe elements separately as shown below:

<div class="div-round" style="width: 640px; height: 360px;">
    <iframe class="iframe-round" allow="autoplay; encrypted-media; fullscreen" src="https://www.youtube.com/embed/Xjs6fnpPWy4?modestbranding=1&autoplay=0"></iframe>
</div>

When implemented correctly, your content will be displayed with the desired visual effect.

To achieve this, enable HTML5 mode in the YouTube player settings.

Check out a demonstration here.

To enclose the iframe, follow this method: http://jsfiddle.net/xmarcos/D4sS7/

Here is a clever and practical "hack-solution" to tackle this complex problem.

To easily embed your iframe, simply place it within a "div" element:

  <div>
   <iframe allowfullscreen="" frameborder="0" height="445" player="html5"scrolling="no" src="https://www.youtube.com/embed/DCTwJJhQFy8"   width="780"></iframe>
  </div>

Then, incorporate the following CSS code into your HTML file:

 div {
   position: relative;
   display:inline-block;
   margin:200px;
}
div:before {
    content: '';
    position: absolute;
    z-index: 5000;
    display: block;
    top: -27px;
    left: -27px;
    right: -27px;
    bottom: -27px;
    background-color: transparent;
    pointer-events: none;
    border: 30px solid white;
    border-radius: 50px;
}

This solution offers great flexibility, utilizing an additional layer for border-radius. Additionally, it works well with most (if not all) modern web browsers. Hopefully, you find this method helpful.