Tossing videos on your website won’t cause a migraine. Actually, anyone can be a whiz with the right knowledge. You then want that YouTube magic directly on your page? You need the iframe embedder for YouTube. Power, in a nutshell as they say. But before you copy and paste, let’s sort out what’s actually happening.
The golden ticket has this form:
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/VIDEO_ID”
title=”YouTube video player” frameborder=”0″
allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” allowfullscreen></iframe>
Let’s analyze that so it doesn’t resemble digital alphabet soup exclusively. Action happens at the part known as src. Replace VID with the string found in your YouTube video’s URL after v=. For example, you glue in abc123 if your video resides at https://www.youtube.com/watch?v=abc123. Remember, mix the wrong letters here and visitors will discover a dismal empty box.
Still simple enough are width and height. Change them, big or small, based on your desired home-theater impression or thumbnail cameo. created a website going from laptop to phone to tablet. Straight ratios appear out of place. Use those big muscles; CSS swoops in with responsive maneuvers to save the day. Here is a succinct equation:
.video-wrapper {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}
.video-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%;
height: 100%;}
Fold your code like a digital burrito.
<div class=”video-wrapper”>
<iframe src=”https://www.youtube.com/embed/VIDEO_ID” allowfullscreen></iframe>
</div>
Sensitive to privacy? Wouldn’t recommended films from random people follow your viewers about? Revers the URL in the source to end with ?rel=0. Then all that shows up after playback are the pearls from your own channel.
Though this is a decades old approach, keep in mind that frame embed can keep up with changing technologies. Painting uses HTML as the brush. The video then is the whole mural. Careful placement and some CSS will enable you to break out from the black and white world of simple text. Your website moves to its own soundtrack right now.
