FAQ: Semantic HTML - Video and Embed

This community-built FAQ covers the “Video and Embed” exercise from the lesson “Semantic HTML”. Note that the embed tag is deprecated can you should use img, picture, video or iframe tags instead.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction to HTML

FAQs on the exercise Video and Embed

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in #get-help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2 posts were split to a new topic: What is the point of videos?

5 posts were split to a new topic: How to decide between video and embed?

2 posts were split to a new topic: What is the slash at the end of embed and img mean?

Hi all, fairly new to all this and I just have a question about the link for the files. does the + do anything between say “Semantic+HTML” or is that just how the file path was named?

Also, on the previous exercise we covered some attributes that we can enclose in the media tags (

Lastly, I’m just starting with the basics of HTML and I’m not a paid subscriber (still evaluating if this is something I can really pursue) from anyone out there who is a paid subscriber, just how much am I missing out on with this course?

Cheers

2 posts were merged into an existing topic: How to decide between video and embed?

Does anyone know why did they use the <source> tag in the <audio> tag? I tried adding the “src” attribute directly to the audio tag and it worked.
Can a media tag have multiple sources or what?

4 Likes

I switched to a paid subscription this week and like you wanted to see if I was able to code first before really investing money into something like this. There are lots of websites out there that are free to use that have similar content but I really like the style of this site and the projects they give you to cement what you have learned. I think you can’t access some content on the free version but you could use other sites in its place.

I’m confused by the src attribute’s placement. Can someone explain why it jumps all over the place for different elements. It’s in the opening tag of the <video> and <image> elements but needs a <source> element for <audio>? Why don’t we need a <source> element for <video> tags?

2 Likes

I’m not entirely sure, but I believe we choose <source> when we want to display more than one type of content. In this link there’s a good example of what I mean.

https://www.w3schools.com/tags/tag_source.asp

Not all browsers are compatible with every media format, so we use <source> to make sure various media formats are available to be displayed in case one of them doesn’t load.

1 Like

In the embed code below why is there a / slash before the closing > ?

embed

If you use the src attribute to link the audio file to the <audio> element, it will most probably work. However, not all browsers support the same audio file type. The <source> element is used to add multiple sources E.g. a .mp3 version and a .webm version. This will make your <audio> element accessible from all browsers

The HTML <source> element specifies multiple media resources for the <picture> , the <audio> element, or the <video> element. It is an empty element, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats. - MDN

In a way, convention. It is totally optional and can be ommited. However, I find it a bit confusing when not writing the “/” before the “>”

So, in conclusion it is only recommended to use the embed tag for adding gifs?

If I wish to add an image, audio or video I should always use figure, audio and video tags respectively, and avoid the embed.

Hey, sorry i’m new to this whole form thing, so I don’t actually know if this is where I should post this question… but I was on the semantic HTML lesson in codecademy, in the video element portion and I tried to place the autoplay attribute and tried refreshing the page but the dog video never played by itself.

code: video loop autoplay controls src=“https://content.codecademy.com/courses/SemanticHTML/dog-video.mp4”>

I know the video needs this thing (<) I just removed it so the video wouldn’t replace the code.

Hi,
How are you all?

Can someone please explain why there is a difference between the way we add audio files and video files?

When adding audio the code used is:

 <audio controls>
        <source src="https://content.codecademy.com/courses/SemanticHTML/dogBarking.mp3" type="audio/mp3">
      </audio> 

But for video we are using this:

 <video src="https://content.codecademy.com/courses/SemanticHTML/dog-video.mp4" controls>Video not supported</video>

I would expect the video code to be similar to the audio one - and to be something like that:

 <video controls>
        <source src="https://content.codecademy.com/courses/SemanticHTML/dog-video.mp4" type="video/mp4">
      </video> 

Or to have the audio code to be similar to the video one - something like that:

 <audio src="https://content.codecademy.com/courses/SemanticHTML/dogBarking.mp3" controls>audio not supported</video>

Or any other I way to have the code be formatted the same way.
What do you think?

Regards,
Ram

1 Like

Can you take a screenshot of your code?

The exercise 8 Video and Embed of the Semantic HTML chapter says:

Note that <embed> is a deprecated tag and other alternatives, such as <video> , <audio> and <img> , should be used in its place, but is being taught for legacy purposes.

Why does it say that <embed> is a deprecated tag while on MDN it has HTML5 Recommendation specification?

I wouldn’t say it was deprecated, just should be used when necessary. If you want to display an image, use the <img /> element. If you want to display a video, use the <video /> element. If the media you want to embed doesn’t have a specific tag for it, then you could use the <embed /> element

1 Like

As of now, most browsers can only autoplay muted videos meaning you have to add the mute attribute. This will make the video autoplay while muted, and then the user can manually turn the sound on